Getting the raphael id attribute in the DOM

问题

I have converted some SVG to Rapahel using http://readysetraphael.com/

Here is an example of code produced:

...
path6233.attr({id: 'path6233' 
...

I have looked in the attr document and it doesn't mention id as a proper attribute. Neither is the id attribute added to the DOM. Is there some way to make raphael add this ID to the DOM so that I can style the element?

Alternatively, can I somehow walk all the paths and add move the id attr to a real DOM ID easily?

回答1:

I hadn't seen readysetraphael.com before -- that's pretty nifty.

It should be reasonably straightforward to walk all of the elements inside a given SVG container via the Raphael paper element's forEach method:

var i = 0;
paper.forEach(function (el) 
{
    el.node.setAttribute("id", "node-" + i++ ) );
});

But I should ask -- since you already have your SVGs incorporated into Raphael, why wouldn't you simply use Raphael to style them programmatically? Curiosity about your reasoning prompts me to ask.

回答2:

You can do so by fetching the shapes underlying DOM element, with a call to the node property, like so:

path6233.node.id = 'node-id';

来源：https://stackoverflow.com/questions/10847481/getting-the-raphael-id-attribute-in-the-dom