No se puede agregar una imagen dentro de SVG a través de jQuery: <image /> etiqueta se convierte en <img />

Question

Quiero agregar elementos en un SVG a través de jQuery. Puedo insertar etiquetas como <rect /> o <text />, pero no puedo insertar imágenes con la etiqueta <image />.

Esta etiqueta se convierte en <img /> automáticamente, lo que no puede mostrar una imagen en SVG: http://jsfiddle.net/G4mJf/

Como puedo evitar esto? Si es imposible, ¿hay otra forma de insertar imágenes en SVG usando JavaScript/jQuery?

Answer 1

se debe utilizar createElementNS():

var img = document.createElementNS('http://www.w3.org/2000/svg','image'); 
img.setAttributeNS(null,'height','536'); 
img.setAttributeNS(null,'width','536'); 
img.setAttributeNS('http://www.w3.org/1999/xlink','href','https://upload.wikimedia.org/wikipedia/commons/2/22/SVG_Simple_Logo.svg'); 
img.setAttributeNS(null,'x','10'); 
img.setAttributeNS(null,'y','10'); 
img.setAttributeNS(null, 'visibility', 'visible'); 
$('svg').append(img); 

Answer 2

jQuery solo no puede manejar la manipulación de SVG correctamente, as this answer explains. Probablemente deberías estar usando Raphael, o uno de los métodos hacky descritos en el enlace de arriba.