The applying order of SVG transforms

Question

In W3C\'s spec, it says:

The value of the ‘transform’ attribute is a , which is defined as a list of transform definitions, which are a

Answer 1

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

Answer 2

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>