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="">
    <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="">
    <polyline points="0,0,50,75,100,0,0,0" style="" fill="#000000"></polyline>
</svg>

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>

• javascript
• svg
• snap.svg

2 Answers 2

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");

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 : "",    
    },