ajouter l'image au fichier svg en utilisant javascript et jquery

Question

Je suis en train d'ajouter une image à un fichier SVG .. j'ai essayé ce code ::

drawImage : function(src, x, y, h, w) { 
     var img = document.createElementNS("http://www.w3.org/2000/svg", "image"); 
     var $img = $(img); 
     $img.attr('x', x); 
     $img.attr('y', y); 
     $img.attr('width', w); 
     $img.attr('height', h); 
     $img.attr('xlink:href', src); 
     $('g').append($img); 
    } 

mais l'image ne semble pas. quand je sélectionne toutes les images .. en utilisant $('image') Je trouve l'image, et je peux la sélectionner, mais quand même ... elle n'est pas visible. J'ai essayé d'enquêter sur ce problème, mais je n'ai rien trouvé. qu'est-ce que je fais mal ??

Answer 1

J'ai trouvé un plugin jQuery qui a résolu mon problème jQuery.svg

il a plusieurs méthodes pour dessiner différentes formes, y compris les images.

Il semble qu'il ajoute des images en créant un nœud dom en utilisant JavaScript natif .. et il fonctionne

Answer 2

Que diriez-vous d'attribuer une largeur et une hauteur à $('g'), qui détient le $img dans votre code?

Answer 3

Vous pouvez utiliser la méthode setAttributeNS:

var img = document.createElementNS('http://www.w3.org/2000/svg','image'); 
img.setAttributeNS(null,'height','200'); 
img.setAttributeNS(null,'width','200'); 
img.setAttributeNS(null,'id','theID'); 
img.setAttributeNS('http://www.w3.org/1999/xlink','href','src'); 
img.setAttributeNS(null,'x','0'); 
img.setAttributeNS(null,'y','0'); 
$('#g').append(img);