Impossibile aggiungere immagini all'interno di SVG tramite jQuery: il tag <image /> diventa <img />

Question

Desidero aggiungere elementi in un file SVG tramite jQuery. Posso inserire tag come <rect /> o <text /> ma non riesco a inserire immagini con il tag <image />.

Questo tag diventa <img /> automaticamente, che non può visualizzare un'immagine in formato SVG: http://jsfiddle.net/G4mJf/

Come posso evitare questo? Se è impossibile, c'è un altro modo per inserire immagini in SVG usando JavaScript/jQuery.

Answer 1

si dovrebbe usare 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 da solo non può gestire correttamente la manipolazione SVG, as this answer explains. Probabilmente dovresti usare Raphael o uno dei metodi hacky descritti nel link sopra.