无法更改 Raphael 中的填充颜色？答案

【问题标题】：can't change the fill color in Raphael?无法更改 Raphael 中的填充颜色？
【发布时间】：2013-06-26 15:33:59
【问题描述】：

我正在尝试将圆圈颜色从绿色更改为红色，但我不能在这里。经过长时间的研究，我发现了一个问题，那就是当我在 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

任何建议都值得赞赏..

【问题讨论】：

标签： javascript raphael

【解决方案1】：

问题似乎是 css 优先级。在动画调用期间，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);
});

【讨论】：

感谢您的回答。我需要使用类，因为我只需要按类更改 css。如何使用这些类以及如何覆盖它。
我会调查 - 如果这可能，我想知道自己。

【解决方案2】：

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

SCircle.node.className = 'green';

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

【讨论】：

谢谢，但它也不起作用。当我这样使用时，该类不适用。
您的 JSFiddle 工作正常。我的浏览器中的圆圈是绿色的。我修改了代码以使用我建议的类名，它也可以正常工作。两者都有效。你用的是什么浏览器？

【解决方案3】：

有一种更简单的方法可以不使用 node 并且可能避免使用 css。看看DEMO：

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
} )

【讨论】：