Como posso adicionar um elemento <image> ao DOM do SVG
Eu tenho uma página web com uma imagem jpg que o usuário desenhar um doodle SVG em cima de usar Raphael.
Eu quero permitir que o usuário salve uma versão rasterizada mesclada disso quando terminar (eu mesmo farei outra coisa com a versão SVG)
Quando o usuário clica em salvar, eu quero adicionar essa imagem de fundo ao DOM SVG gerado como um elemento e, em seguida, usar canvg para gravar o SVG em um elemento de tela. Finalmente eu uso o método toDataUrl () para transformar isso em um jpg.
Não consigo fazer o bit do meio funcionar - qual é a melhor maneira de adicionar a imagem ao DOM? Quando eu uso o código abaixo, recebo um erro de javascript que diz que appendChild () não é uma função.
Eu estou querendo saber se tem algo a ver com como eu fico com o SVG usando o método .html () - talvez o que é retornado não esteja sendo interpretado como um documento SVG real?
Qualquer ajuda muito 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});
});