Set ID attribute on a Snap.svg graphic

Question

I'm using Snap.svg API and I have three graphics that I need to select in my CSS for styling purposes. Thus, to distinguish between them, I need to give them an ID or class name.

This is how I create an element:

var draw = Snap(100, 75);
c = draw.polyline(0,0, 50,75, 100,0, 0,0);
c.attr({
    fill: "black"
});

This is the result I get:

<svg height="75" version="1.1" width="100" xmlns="http://www.w3.org/2000/svg">
    <polyline points="0,0,50,75,100,0,0,0" style="" fill="#000000"></polyline>
</svg>

This is what I need the result to be:

<svg id="graphic_1" height="75" version="1.1" width="100" xmlns="http://www.w3.org/2000/svg">
    <polyline points="0,0,50,75,100,0,0,0" style="" fill="#000000"></polyline>
</svg>

Answer 1

Update

I raised an issue on GitHub and it looks like this will be fixed in the next release. For now, on the development branch, you can use Element.attr:

var draw = Snap(100, 75);
draw.attr({ id: 'graphic_1' });

I'm leaving the original answer below because:

1. at time of writing, this doesn't work in the master (release) version; and
2. the technique described for directly accessing the underlying DOM node might be useful to others in future, or those using an older version of Snap.svg.

---

It's not documented, but internally Snap.svg stores the DOM node in a property called node. Thus, you can set the ID of the canvas like so:

draw.node.id = 'graphic_1';

Alternatively, if you would prefer to avoid undocumented techniques, you could create an element with the ID that you want first and use that directly:

<svg id="graphic_1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="75"></svg>

var draw = Snap("#graphic_1");

Answer 2

With Snap version 0.2.0 the .attr() method will work as expected,

var draw = Snap(100, 75);
draw.attr({id: "graphic_1"});

but with Snap version 0.1.0 I had modify snap.svg.js (approx. line 4338) to allow this to work.

var availableAttributes = {
    svg: {
        id : "",    
    },