CODEWITHSUNDEEP
javascriptjquerydomraphael
3logy
3logy

Reputation: 2712

How to change or add an ID to a SVG?

I have a SVG create with Raphael 2.0 which look like this :

<div class="stave">
<svg height="342" version="1.1" width="512" xmlns="http://www.w3.org/2000/svg"
style="overflow: hidden; position: relative;" viewBox="0 410 1300 80"
preserveAspectRatio="meet">
........
</svg>
</div>

i just want to set an ID to the svg tag! How can i do it? JQUERY or RAPHAEL 2.0? i have see many answers but none works for me.

Thank you for helping

Upvotes: 0

Views: 21939

Answers (3)

ludeq
ludeq

Reputation: 31

var paper=Raphael(0, 0, 342, 512)
paper.canvas.id='id_svg1'

Upvotes: 3

enloz
enloz

Reputation: 5824

With jQuery you can use element selector and :nth-child().

Something like this: (jsFiddle)

<div class="frame">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</div>
<script type="text/javascript">
    $('div').css({'font-weight':'bold'});
    $('.frame div:nth-child(2)').attr("id","newId");
    $('#newId').css({'color':'#f30'})
</script>

Of course, in your case, selector would be $('svg')

Upvotes: 0

Some Guy
Some Guy

Reputation: 16210

document.getElementsByTagName('svg')[0].id = 'svg_id';

That should work if you have only one SVG tag on your page and if you've called it after having created the tag using Raphael.

If you haven't created the tag using Raphael, you can just use something like this:

<svg id='svg_id'></svg>

Along with the other attributes, of course.

Upvotes: 8

Related Questions