Applying a transformation to a set in Raphael.js

Question

Using Raphael 2.0, I am trying to apply a transform to a set of objects in a way that is relative to all of the objects in the set. However, the effect I am getting is that the transform is applied to each item individually, irrespective of the other objects in the set.

For example: http://jsfiddle.net/tim_iles/VCca9/8/ - if you now uncomment the last line and run the code, each circle is scaled to 0.5x. The actual effect I am trying to achieve would be to scale the whole set of circles, so their relative distances are also scaled, which should put all four of them inside the bounding box of the white square.

Is there a way to achieve this using Raphael's built in tools?

Answer 1

When you scale, the first parameter is the X-scale. If you provide no other parameters, it will use that as the Y-scale, and scale around the center of the object.

When you scaled the rectangle, it scaled around the center of the rectangle. If you want the circles to scale around that point as well, rather than their centers, you should provide that point.

So the last line could be set.transform("s0.5,0.5,100,100"); (100,100 being the center of the rectangle you scaled)

At least, I think this is what you're asking for.