Question

I have these 4 rectangles and each rectangle has some amount of rotation transformation applied to it. I put all these rectangles in a set and then applied transformation on it. Doing so the rotation transformation on the individual rectangles was lost. I do not want that to happen. How can I work around this?

JS Fiddle Code

window.onload = function(){
    var paper = Raphael(0,0,500,500);

    var rect01 = paper.set();
    paper.setStart();      

    var a = paper.rect(10,10,50,10).transform("r10");
    var b = paper.rect(10,30,50,10).transform("r-10");
    var c = paper.rect(10,50,50,10).transform("r10");
    var d = paper.rect(10,70,50,10).transform("r-10");

    var rect01 = paper.setFinish();    
    rect01.transform("t100,100");//comment out this line to view the individual transformations

}

Answer 1

Whenever you do a new transform on an element it resets any previous transforms, I’m sure there are numerous ways to achieve what you want, one way would be to just do the move at the same time as the rotation.

NOTE: In your case you have to do the move before the rotation.

window.onload = function(){
    var paper = Raphael(0,0,500,500);    

    var a = paper.rect(10,10,50,10).transform("t100,100r10");
    var b = paper.rect(10,30,50,10).transform("t100,100r-10");
    var c = paper.rect(10,50,50,10).transform("t100,100r10");
    var d = paper.rect(10,70,50,10).transform("t100,100r-10");

}

http://jsfiddle.net/Vqn93/2/

UPDATE:

After further analysis you are able to append and prepend transformations, so if you want to keep your set as you had it you can also do:

window.onload = function(){
    var paper = Raphael(0,0,500,500);

    var rect01 = paper.set();
    paper.setStart();      

    var a = paper.rect(10,10,50,10).transform("r10");
    var b = paper.rect(10,30,50,10).transform("r-10");
    var c = paper.rect(10,50,50,10).transform("r10");
    var d = paper.rect(10,70,50,10).transform("r-10");

    var rect01 = paper.setFinish();

    // prepend the translation before all the rotations
    rect01.transform("t100,100...");

}

The docs for element transform state that you use … before or after depending on if you want to prepend or append.

http://jsfiddle.net/Vqn93/3/