Setting custom attrribute on svg element (Raphael)

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?

Accepted Answer

`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');
```

Setting custom attrribute on svg element (Raphael)

Solution

Problem