22

W3C の仕様では、次のように述べています。

'transform' 属性の値は <transform-list> で、指定された順序で適用される変換定義のリストとして定義されます。

...

変換のリストが提供されている場合、最終的な効果は、提供された順序で各変換が個別に指定されたかのようになります。

Firefox、Chrome、IE10 で次のマークアップを試してみたところ、3 つすべてが最初に翻訳を行い、次に回転を行うことでレンダリングされました。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>
4

2 に答える 2

24

仕様は、最も右側の変換が最初に適用されるという順序についてかなり明確です。

変換のリストが提供される場合、最終的な効果は、提供された順序で各変換が個別に指定されたかのようになります。

すなわち、

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

機能的には次のものと同等です。

<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>
于 2013-09-03T08:27:37.767 に答える
0 
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));
}
于 2015-07-06T12:55:16.413 に答える