SVG的应用顺序转换

在W3C的规范中,它说:

The value of the ‘transform’ attribute is a <transform-list>, which is defined as a list of transform definitions, which are applied in the order provided.

'transform'属性的值是 ,它被定义为变换定义列表,它按照提供的顺序应用。

...

If a list of transforms is provided, then the net effect is as if each transform had been specified separately in the order provided

如果提供了变换列表,那么净效果就好像每个变换都是按照提供的顺序单独指定的

When I tried out the follow markups in firefox, chrome and IE10, all three rendered by doing translate first, then following by rotate! See the codepen snippet. What have I missed here? Or the implementations from the 3 browsers are not W3C compliant?

当我尝试使用firefox,chrome和IE10中的跟随标记时,所有三个通过首先进行翻译,然后通过旋转进行渲染!请参阅codepen代码段。我错过了什么?或者3个浏览器的实现不符合W3C?

<svg width="180" height="200"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- This is the element before translation and rotation are applied -->
  <rect x="0" y="0" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity=0.2 stroke-opacity=0.2></rect>

  <!-- Now we add a text element and apply rotate and translate to both -->
  <rect x="0" y="0" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="rotate(45 100 50) translate(50)"></rect>
</svg>

2 个解决方案

#1

The specification is pretty clear about the order which is that the rightmost transform is applied first.

规范非常清楚,首先应用最右边的变换的顺序。

If a list of transforms is provided, then the net effect is as if each transform had been specified separately in the order provided.

如果提供了变换列表,那么净效果就好像每个变换都是按照提供的顺序单独指定的。

I.e,

<g transform="translate(-10,-20) scale(2) rotate(45) translate(5,10)">
  <!-- graphics elements go here -->
</g>

is functionally equivalent to:

在功能上等同于:

<g transform="translate(-10,-20)">
  <g transform="scale(2)">
    <g transform="rotate(45)">
      <g transform="translate(5,10)">
        <!-- graphics elements go here -->
      </g>
    </g>
  </g>
</g>

#2

If you want to sequentially change these transformations 
you have to try this one

<g transform="translate(-10,-20)  onmouseover=changeTransform(evt)">

function changeTransfrom(evt)
{
var id=evt.target;
id.setAttribute('transform',scale(0.5));
id.setAttribute('transform',rotate(30));
id.setAttribute('transform',skewY(45));
id.setAttribute('transform',matrix(2,2));
}

#1