Transform with Raphael.js

Question

I have drawn two paths. I have applied glow to one of them, when i transform the set only the path which doesn't has glow moves and the one with glow doesn't, instead the "glow" gets transformed. I want the path and glow to transform together. How can I achieve that? I hope I explained my problem properly.

Here is my code: jsfiddle Link

window.onload = function(){

var paper = Raphael(0,0,1900,950);

var rect01 = paper.set();
rect01.push(
paper.rect(20,30,10,15).attr({fill:'blue',stroke:'none'}).glow({width:5,opacity:1,color:'red'}),    
paper.rect(50,30,10,15).attr({fill:'green',stroke:'none'})
)

var superset = paper.set();
superset.push(rect01);
superset.transform("T10,10");
}

Answer 1

It's just a matter of how you're building your set. Most element functions return a reference to the element being modified, but glow is an exception -- it returns a new set element for the glow effect itself. In your code above, you are effectively inserting the glow for the first rect AND the second rect, but not the first rect itself.

To preserve the compactness of your code, I'd recommend using paper.setStart and paper.setFinish to build your set.

var rect01 = paper.set();

paper.setStart();      

paper.rect(20,30,10,15).attr({fill:'blue',stroke:'none'}).glow({width:5,opacity:1,color:'red'});    
paper.rect(50,30,10,15).attr({fill:'green',stroke:'none'});

var rect01 = paper.setFinish();  // gets a reference to a set containing everything created since the setStart call above