L'ordine applicazione di SVG trasforma

Question

In W3C's spec, si dice:

Il valore del 'trasformare' attributo è un < trasformare-list>, che è definito come un elenco di trasformare definizioni, che vengono applicati nell'ordine fornito.

...

Se viene fornito un elenco di trasformazioni, allora l'effetto netto è come se ogni transform era stato specificato separatamente, nell'ordine fornito

Quando ho provato le marcature seguire in firefox, chrome e IE10, tutti e tre resi facendo tradurre prima, poi seguendo da ruotare! Vedi lo codepen snippet. Cosa mi sono perso qui? Oppure le implementazioni dei 3 browser non sono conformi al 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> 

Answer 1

The specification è piuttosto chiaro circa l'ordine che è quello più a destra trasformazione viene applicata prima.

Se viene fornito un elenco di trasformazioni, l'effetto netto è come se ogni trasformazione fosse stata specificata separatamente nell'ordine fornito.

cioè,

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

è funzionalmente equivalente a:

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

Answer 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)); 
}