如何将元素添加到SVG DOM

我有一个带有jpg图像的网页，用户可以使用Raphael绘制SVG涂鸦。

我希望允许用户在完成后保存合并的光栅化版本（我将使用SVG版本自己做其他事情）

当用户单击save时，我想将该背景图像作为元素添加到生成的SVG DOM中，然后使用canvg将SVG写入canvas元素。 最后我使用toDataUrl（）方法将其转换为jpg。

我无法让中间位工作 – 将图像添加到DOM的最佳方法是什么？ 当我使用下面的代码时，我得到一个javascript错误，说明appendChild（）不是一个函数。

我想知道它是否与我如何使用.html（）方法获取SVG有关 – 也许返回的内容不会被解释为真正的SVG文档？

任何帮助非常感谢。

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

这是一种方法：

 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);