Question

I have multiple SVGs which I want to add an ID. The problem is that they are created automatically by the Raphael object.
Is there an easy way of adding ID to the Raphael paper? ( note that there are multiple papers)

Answer 1

All objects in Raphael return a shape element, and you can use the node property to get access to the raw element. From there its fairly trivial to give the element an ID.

For example, to create a rectangle with an ID:

paper.rect(0, 0, 300, 300, 0).attr({fill: "orange", stroke: "none"}).node.setAttribute('id', 'myElement');

And a working fiddle to see it in action: http://jsfiddle.net/CwmZr/1/

Note that Raphael may not always use SVG. In older versions of IE, it will use VML, so node will likely refer to a VML element, not an SVG element.

EDIT:

If you want to set the ID of the paper object (the <svg /> element), you could do something like this:

var paper = //get the paper object
paper.canvas.setAttribute('id', 'mySvgElement');