Question

When I set id to svg element

var circle = paper.circle(x, y, r);
circle.node.id = 'circle-id';

everything is fine and I can see expected result like this when browsing document with the debugger:

<circle cx="320" cy="240" r="4" fill="none" stroke="#000" id="circle-id" />

Then I’m able to get this element by id via document.getElementById method or via jQuery.
But adding some other attributes fails. If I try to add attribute custom:

circle.node.custom = 'custom-attr';

I see no effect.

What kind of attributes can we add to SVG element using Raphael and how to add arbitrary attributes?

Answer 1

node is a DOM element, id is a standard property on elements to quickly read/write its value. Use the setAttribute method to set non-standard attributes.

circle.node.setAttribute('custom', 'custom-attr');