Порядок применения SVG-преобразований

В спецификация W3C, он говорит:

Значение атрибута transform представляет собой список < transform-list > , который определяется как список определений преобразования, которые применяются в указанном порядке.

...

Если представлен список преобразований, то чистый эффект будет таким, как если бы каждое преобразование было указано отдельно в указанном порядке

Когда я опробовал следующие разметки в firefox, chrome и IE10, все три отображались, делая сначала перевод, затем следуя за поворотом! См. фрагмент кода. Что я пропустил здесь? Или реализации из трех браузеров не совместимы с 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>

Ответ 1

Спецификация довольно ясно описывает порядок, который заключается в том, что сначала применяется самое правое преобразование.

Если представлен список преобразований, то сетевой эффект будет таким, как если бы каждое преобразование было указано отдельно в указанном порядке.

то есть,

<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>

Ответ 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));
}