¿Cómo puedo agregar un elemento <image> al SVG DOM

Question

Tengo una página web con una imagen jpg que el usuario dibuja un garabato SVG además de usar Raphael.

Quiero permitir al usuario guardar una versión rasterizado fusionada de este cuando se hacen (Voy a hacer algo más con SVG versión de mí mismo)

Cuando el usuario hace clic ahorrar Quiero añadir que la imagen de fondo al DOM SVG generado como un elemento y luego use canvg para escribir el SVG en un elemento canvas. Finalmente utilizo el método toDataUrl() para convertirlo en un jpg.

No puedo hacer que la parte central funcione, ¿cuál es la mejor manera de agregar la imagen al DOM? Cuando uso el siguiente código, recibo un error de javascript que dice que appendChild() no es una función.

Me pregunto si tiene algo que ver con la forma en que obtengo el SVG utilizando el método .html(). ¿Quizás lo que se devuelve no se está interpretando como un documento SVG real?

Cualquier ayuda muy apreciada.

function saveImage(){ 

     var img = document.getElementById('canvas').toDataURL("image/png"); 
     window.open(img,'Download'); 

    } 

    $('#save').click(function(){ 

     var svg = $('#editor').html(); 

     // Create new SVG Image element. Must also be careful with the namespaces. 
     var svgimg = document.createElementNS("http://www.w3.org/2000/svg", "image"); 
     svgimg.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', "myimage.jpg"); 


     // Append image to SVG 
     svg.appendChild(svgimg); 

     canvg('canvas', svg, {renderCallback: saveImage(), ignoreMouse: true, ignoreAnimation: true, ignoreDimensions: true}); 

    }); 

Answer 1

Esta es una manera de hacerlo:

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image'); 
svgimg.setAttributeNS(null,'height','200'); 
svgimg.setAttributeNS(null,'width','200'); 
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', 'myimage.jpg'); 
svgimg.setAttributeNS(null,'x','10'); 
svgimg.setAttributeNS(null,'y','10'); 
svgimg.setAttributeNS(null, 'visibility', 'visible'); 
$('svg').append(svgimg);