raphael - Fading out two over-layed objects uniformly in RaphaelJS/SVG -

i have 2 overlayed rectangles:

i'm trying fade them out uniformly if 1 object.

the problem: when animate opacity 1 0, top rectangle becomes transparent , reveals edges of rectangle beneath it.

here code:

    var paper = raphael(50,50,250,350)     var rect = paper.rect (20,40,200,200).attr({"fill":"red","stroke":"black"})     var rect2 = paper.rect (100,140,200,200).attr({"fill":"red","stroke":"black"})     var set=paper.set()     set.push(rect)     set.push(rect2)     set.click(function () {fadeout()})     function fadeout() {             rect.animate({"opacity":0},3000)             rect2.animate({"opacity":0},3000)             settimeout(function () {                 rect.attr({"opacity":1})                 rect2.attr({"opacity":1})             },3100)      } 

when set clicked, rectangles fade out in 3 seconds. (look @ red rectangles in fiddle, clarify problem)

https://jsfiddle.net/apol5rfp/1/

in fiddle create similar looking green path performs fade out correctly.

i can achieve same type of fadeout multiple objects?

i think quite difficult in raphael alone.

few options spring mind. don't use raphael, use snap, put them in group , change opacity in group.

var g = paper.g(rect, rect2);  g.click(function () { fadeout( )} )  function fadeout( el ) {          el.animate({"opacity":0},3000)         settimeout(function () {             el.attr({"opacity":1})         },3100)  } 

jsfiddle

however, may tied raphael, makes things bit tricky, doesn't support groups. place 'blank' object on (which matches same background) , animate opacity in opposite way, this..(note disabling of clicks on top object in css)

var rectblank = paper.rect(18,20,250,330).attr({ fill: 'white', stroke: "white", opacity: 0 }); var set=paper.set() .... rectblank.animate({"opacity":1},3000) 

jsfiddle

otherwise think may need use filter, may bit. so question