使用 Raphael 为 SVG 矩形的不透明度设置动画时遇到问题答案

【问题标题】：Having trouble animating SVG rect's opacity using Raphael使用 Raphael 为 SVG 矩形的不透明度设置动画时遇到问题
【发布时间】：2012-06-28 00:51:16
【问题描述】：

我正在使用 Raphael 库并尝试将矩形的不透明度设置为从 0 到 1 的动画。

这是我写的代码：

    this.myRect.attr( 'opacity', 0);
    this.myRect.animate({opacity: 1}, 1000);

这不起作用，我认为是动画线不正确，因为我可以将初始属性设置为较低的值，并且在我运行脚本时很明显。

有什么想法吗？

【问题讨论】：

【解决方案1】：

我知道这已经过时了，但我是在自己遇到它后才发现的。该属性是“填充-不透明度”而不是填充。所以使用

     node.animate({ "fill-opacity": "0.9" }, 200);

【讨论】：

【解决方案2】：

$('#'+this.Myrect.node.id).animate({opacity: 1}, 1000);

试试这个方法

【讨论】：

【解决方案3】：

在我看来，您的代码问题源于使用this.myrect.。我假设您已将 myRect 声明为 paper.rect(...)，如果是这样，您为什么需要使用 this。

Have a look at this quick JsFiddle I mocked up 它基本上表明你应该使用rect.animate()（或其他一些元素）而不是this。根据我的个人经验，this 用于将事件附加到对象。

【讨论】：