can't change the fill color in Raphael?

Question

I'm trying to change the circle color from green to red but i can't here. After long time research i found one issue, which is when i use class in Raphael i can't change the color. i need to use the class to change the color of the 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
} )

Here is the JSFiddle Link

Any suggestions should be appreciated..

Answer 1

The problem appears to be css precedence. The css class takes precedence over the fill during the animate call. Read this SO post for more discussion which advises not using CSS styles for styling Raphael objects.

Applying the attributes explicitly without css works.

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 is known to be buggy for DOM attributes in some browsers. Try the simple className attribute instead:

SCircle.node.className = 'green';

This is known to work in all browsers.

Answer 3

There is an easier way to do this without using the node and maybe avoiding css . Look at the 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
} )