I am working on the below demo. Why am I not able to add id sample
to the object? I am trying to control the element style through css but it is not working
var paper = Raphael("container", 500, 300);
var dot = paper.circle(50, 50, 30).attr({
stroke: "#000",
"stroke-width": 5
}).data("id", "sample");
#sample{
fill:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<div id="container"></div>
The problem is data() doesn't refer to svg attributes on an element, but custom data on a Raphael element, that it can access.
If you want to set the id attribute, you would need to try one of the following...
set the 'id' within the attr({}) definition you are using (however, iirc some versions of Raphael don't work with that), if not you would need to do
dot.attr({ 'id', 'sample' }); // or try the following
dot.node.setAttribute('id', 'sample'); // or
dot.node.id = 'sample';