Question

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

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优先级。在动画调用期间，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);
});

Answer 2

众所周知，

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

SCircle.node.className = 'green';

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

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

不能改变拉斐尔的填色？

3 个答案: