que tiene una construcción:Conseguir 'xlink: href' atributo del elemento SVG <image> dinámicamente usando JS en 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>
quiero conseguir pic.jpg
url y tengo que empezar desde el div más externa, no exactamente desde el elemento de origen <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
Mi pregunta es ¿cuál es el camino correcto para conseguir este tipo de atributos de elemento como SVG y sus hijos?
Porque antes de que intentara hacer de esta manera y que también funcionó bien en Chrome (no lo probé otros navegadores):
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
Pero cuando traté de utilizar getAttributeNS()
me dieron resultado en blanco:
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
Gracias! Esta respuesta me ayudó a * establecer * el atributo xlink: href de una imagen en mi contenido SVG a través de JavaScript. Mi código se ve así: img.setAttributeNS ('http://www.w3.org/1999/xlink', 'href', 'new.url'); donde new.url es la url de la imagen con la que quiero reemplazar el original. – grw
ahora, ¿cómo hacer lo mismo con los selectores de jquery? –
Usar jquery con SVG le causará mucho dolor y es mejor evitarlo. –