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
Vous devez vous connecter pour publier un commentaire.
L'utilisation correcte est
getAttributeNS('http://www.w3.org/1999/xlink', 'href');