scaling and rotation in Raphael.js

Question

I don't get how Raphael.js transformation function works. I have the following piece of code:

var paper = new Raphael(0,0,1000,1000);
var rect = paper.rect(0,0,40,40);
rect.transform("s2,2,0,0t30,30");

The result of transformation is 60 px movement in each axis instead of 30. Why is scaling affecting tranformation?

Answer 1

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

var rect = paper.rect(0,0,40,40);
rect.transform("s2,2,0,0t30,30");

is functionally equivalent the following SVG markup (even though this is not actually what raphael will produce)

<g transform="scale(2)">
  <g transform="translate(30,30)">
    <rect x="0" y="0" width="30" height="30"/>
  </g>
</g>

So from inner to outer we start with a rect at x1, y1, x2, y2 = 0,0,30,30 which is in a translated <g> which moves it to 30, 30, 60, 60 which is then in a scaled <g> which scales that result to 60, 60, 120, 120 i.e. a translation of 60 pixels.