Applying a transform to a set in Raphael.js

Question

Using Raphael 2.0 , I am trying to apply a transform to a collection of objects in a way that applies to all objects in the collection. However, the effect that I get is that the transformation is applied to each element individually, regardless of the other objects in the set.

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

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

Answer 1

When scaling, the first parameter is the X scale. If you do not specify other parameters, it will use this as the Y scale and scale around the center of the object.

When you scale the rectangle, it scales around the center of the rectangle. If you want circles to also scale around this point, rather than their centers, you must specify this point.

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

At least I think this is what you are asking for.