使用Raphael在动画SVG矩形的不透明度方面遇到了困难

Question

我正在使用Raphael库，尝试将一个矩形的透明度从0动画到1。

这是我编写的代码:

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

这不起作用，我认为是动画行不正确，因为我可以将初始属性设置为较低的值，当我运行脚本时可以注意到它。

有什么想法吗？

- Jack Roscoe

Answer 1

我知道这篇文章比较旧，但是我刚刚碰到了同样的问题并找到了解决方法。正确的属性名应该是"fill-opacity"而不是"fill"，所以请使用如下代码：

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

- Ortal

Answer 2

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

尝试这种方式

- Max Abrahamsson

---

我会使用 $(myRect.node)，因为它不需要查询 DOM，也不需要矩形元素具有 ID。此外，您可以添加该答案需要 jQuery 库。 - Fabrício Matté

Answer 3

在我看来，你的代码问题似乎是因为使用了this.myrect.。我假设你已经将myRect声明为paper.rect(...)，如果是这样，那么你为什么需要使用this。

看一下我模拟的这个快速JsFiddle，它基本上演示了你应该使用rect.animate()（或者其他元素），而不是this。从我的个人经验来看，this用于将事件附加到对象上。

- Adam Holmes