Raphael Moving Sets

Question

I make a candlestick using two rectangles and making a set. Then I make 100 candlesticks and make that a set. When I try to move all 100 candlesticks, they either all move to one coordinate, or all move correctly, but the sticks all move to the edge of the candle.

How can I move the whole set, but retain the inner transforms of the candlesticks?

Answer 1

It is possible to "append" or "prepend" transformations to a set of Raphael objects using the forms "...Tx,y" and "Tx,y..." respectively. In your example, prepending will probably be more functional since you want the absolute movement of the set in the viewbox to occur before any other transformations assigned on a per-element basis.

You should be able to do this or something much like it:

var shift_x = 100, shift_y = 50;
set.attr( { transform: "T" + shift_x + "," + shift_y + "..." } );

You'll notice some elliptical commentary with respect to transform prepend/append in the formal documentation for that function which, sadly, leaves much to be desired.