在RaphaelJS / SVG中统一淡出两个叠加的对象

Question

我有两个重叠的矩形：

我试图将它们统一淡出，好像它们是一个物体一样。

问题： 当我将其不透明度从1设置为0时，顶部矩形变为透明，并显示其下方矩形的边缘。

这是我的代码：

    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)

    }

单击该组时，矩形会在3秒内淡出。 （看看我小提琴中的红色矩形，它会澄清我的问题）

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

在我的小提琴中，我还创建了一个类似的绿色路径，正确地执行淡出。

我可以用多个对象实现相同类型的淡出效果吗？

Answer 1

我认为仅拉斐尔就很困难。

很少有选择出现在脑海中。不要使用Raphael，使用像Snap这样的东西，将它们放在一个组中并改变组中的不透明度。

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

然而，你可能会与拉斐尔联系在一起，这会使事情变得有点棘手，因为它不支持团体。您可以在其上放置一个“空白”对象（与背景匹配）并以相反的方式设置其不透明度，如下所示..（请注意禁用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

否则我认为您可能需要使用过滤器，这可能会有所帮助。 SO question