Obtenir l'attribut 'xlink: href' du SVG & lt; image & gt; élément dynamiquement en utilisant JS en HTML DOM

J'ai un 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>

Je veux obtenir pic.jpg url et j'ai besoin de commencer à partir de la plus externe de la div, pas exactement à partir de la source <image> élément:

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

Ma question est quelle est la bonne façon d'obtenir ce genre d'attributs de l'élément comme SVG et de ses enfants?

Parce qu'avant j'ai essayé de le faire de cette façon et il a également travaillé bien dans Chrome (je n'ai pas essayer d'autres navigateurs):

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

Mais quand j'ai essayé d'utiliser getAttributeNS() je suis vierge résultat:

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

source d'informationauteur Green