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

Question

I have two overlayed rectangles:

I'm trying to fade them out uniformly as if they were one object.

The problem: When I animate their opacity from 1 to 0, the top rectangle becomes transparent and reveals the edges of the rectangle beneath it.

Here is my 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 the set is clicked, the rectangles fade out in 3 seconds. (look at the red rectangles in my fiddle, it will clarify my problem)

https://jsfiddle.net/apoL5rfp/1/

In my fiddle I also create a similar looking green path that performs the fade out CORRECTLY.

I can I achieve the same type of fadeout with multiple objects?

Answer 1

I think this is quite difficult in Raphael alone.

Few options spring to mind. Don't use Raphael, use something like Snap, put them in a group and change opacity in the group.

var g = paper.g(rect, rect2);

g.click(function () { fadeOut( this )} )

function fadeOut( el ) {

        el.animate({"opacity":0},3000)
        setTimeout(function () {
            el.attr({"opacity":1})
        },3100)

}

jsfiddle

However, you may be tied to Raphael, which makes things a bit tricky, as it doesn't support groups. You could place an 'blank' object over it (which matches same as background) and animate its opacity in the opposite way, like this..(note the 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 I think you may need to use a filter, which may help a bit. SO question