javascript - 无法更改 Raphael 中的填充颜色？

Question

我正在尝试将圆圈颜色从绿色更改为红色，但我不能在这里。经过长时间的研究，我发现了一个问题，那就是当我在 Raphael 中使用类时，我无法更改颜色。我需要使用类来改变圆圈的颜色。

var paper = new Raphael('myPaper',500,500);

var SCircle = paper.circle(300,100,50).data('id','green');
SCircle.node.setAttribute('class','green'); 

$("#test").click(function () {   
    SCircle.animate({fill:'pink'},200); //color is not filling
} )

这是JSFiddle 链接

任何建议都应该不胜感激..

Answer 1

问题似乎是css优先级。在动画调用期间，css 类优先于填充。阅读这篇SO 帖子以获得更多讨论，其中建议不要使用 CSS 样式来设置 Raphael 对象的样式。

在没有 css 的情况下显式应用属性。

var paper = new Raphael('myPaper',500,500);    
var SCircle = paper.circle(300,100,50); 
SCircle.node.setAttribute('fill','green');
SCircle.node.setAttribute('stroke','black');
SCircle.node.setAttribute('stroke-width','3');

$("#test").click(function() {   
    SCircle.animate({'fill':'pink'},200);
}); 

Answer 2

有一种更简单的方法可以做到这一点，而无需使用node并且可能避免使用css. 看演示：

var paper = new Raphael('myPaper',500,500);

var SCircle = paper.circle(300,100,50).data('id','green');
SCircle.attr({fill: 'green', stroke: '#000', "stroke-width": 3}); 

$("#test").click(function () {   
    SCircle.animate({fill:'pink'},200); //good to go
} )

Answer 3

setAttribute已知在某些浏览器中存在 DOM 属性的错误。请尝试使用简单的className属性：

SCircle.node.className = 'green';

众所周知，这适用于所有浏览器。