Mam budowy:Getting 'xlink: href' atrybut elementu SVG <image> dynamicznie przy użyciu JS w HTML DOM
<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>
Chcę dostać pic.jpg
URL i muszę zacząć od najbardziej zewnętrznej div, nie dokładnie od elementu źródło <image>
:
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
Moje pytanie brzmi, co jest właściwym sposobem na uzyskanie tego rodzaju atrybutów elementu jak SVG i jego dzieci?
Ponieważ przed Starałem się zrobić to w ten sposób, a także pracował dobrze w Chrome (nie próbowałem innych przeglądarek):
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
Ale kiedy próbował użyć getAttributeNS()
mam pusty wynik:
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
Dzięki! Ta odpowiedź pomogła mi * ustawić * atrybut xlink: href obrazu w mojej zawartości SVG za pomocą JavaScript. Mój kod wygląda następująco: img.setAttributeNS ("http://www.w3.org/1999/xlink", "href", "new.url"); gdzie new.url to adres URL obrazu, z którym chcę zastąpić oryginał. – grw
teraz, jak zrobić to samo z selektorami jquery? –
Używanie jquery z SVG spowoduje wiele bólu i najlepiej go unikać. –