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 Link

任何建议都应该受到赞赏..

Answer 1

问题似乎是 css 优先级。在 animate 调用期间，css 类优先于填充。阅读此SO post更多讨论建议不要使用 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);
});