在 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 秒内淡出。（看看我 fiddle 中的红色矩形，它会澄清我的问题）

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

在我的 fiddle 中，我还创建了一条外观相似的绿色路径，可以正确执行淡出。

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

Answer 1

我觉得这在拉斐尔的作品中是相当困难的。

想的选项很少 spring。不要使用 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

但是，您可能依赖于 Raphael，这让事情变得有点棘手，因为它不支持群组。您可以在其上放置一个 'blank' 对象（与背景匹配）并以相反的方式设置其不透明度的动画，就像这样..（注意禁用对 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

在 RaphaelJS/SVG 中均匀淡出两个重叠对象

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

svg

raphael