Getting 'xlink:href' attribute of the SVG <image> element dynamically using JS in HTML DOM

Question

I have a construction:

<div id="div">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg">
        <image x="2cm" y="2cm" width="5cm" height="5cm" id="img" xlink:href="pic.jpg"></image>
    </svg>
</div>

I want to get pic.jpg url and I need to begin from the most outer div, not exactly from the source <image> element:

var div = document.getElementById("div");
var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];
var url = img.getAttribute('xlink:href');   // Please pay attention I do not use getAttributeNS(), just usual getAttribute()

alert(url);     // pic.jpg, works fine

My question is what is the right way to get such kind of attributes from element like SVG and its children?

Because before I tried to do this way and it also worked fine in Chrome (I didn't try other browsers):

var svg = div.getElementsByTagName('svg')[0];   // I do not use NS
var img = svg.getElementsByTagName('image')[0];
var url = img.getAttribute('xlink:href');  // and do not use getAttributeNS() here too

alert(url);     // pic.jpg, works fine

But when I tried to use getAttributeNS() I got blank result:

var svg = div.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'svg')[0];
var img = svg.getElementsByTagNameNS('http://www.w3.org/2000/svg', 'image')[0];

// Please pay attention I do use getAttributeNS()
var url = img.getAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href'); 

alert(url);     // but I got black result, empty alert window

Robert Longson · Accepted Answer · 2012-09-14 10:50:48Z

29

The correct usage is getAttributeNS('http://www.w3.org/1999/xlink', 'href');

answered Sep 14, 2012 at 10:50

Robert Longson

125k27 gold badges272 silver badges258 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

grw Over a year ago

Thanks! This answer helped me set the xlink:href attribute of an image in my SVG content via JavaScript. My code looks like: img.setAttributeNS('w3.org/1999/xlink', 'href', 'new.url'); where new.url is the url of the image with which I want to replace the original.

Robert Longson Over a year ago

Using jquery with SVG will cause you much pain and is best avoided.

Collectives™ on Stack Overflow

Getting 'xlink:href' attribute of the SVG <image> element dynamically using JS in HTML DOM

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related