如何向SVG DOM添加元素

I have a web page with a jpg image that the user draw an SVG doodle on top of using Raphael.

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

I want to allow the user to save a merged rasterised version of this when they are done (i will be doing something else with SVG version myself)

我想让用户在完成后保存合并后的光栅化版本(我将自己用SVG版本做一些其他的事情)

When the user clicks save I want to add that background image to the generated SVG DOM as an element and then use canvg to write the SVG to a canvas element. Finally I use the toDataUrl() method to turn that into a jpg.

当用户单击save时，我希望将该背景图像作为元素添加到生成的SVG DOM，然后使用canvg将SVG写入画布元素。最后，我使用toDataUrl()方法将其转换为jpg格式。

I can't get the middle bit to work —what is the best way to add the image to the DOM? When i use the below code I get a javascript error that says appendChild() is not a function.

我不能让中间的位起作用——向DOM添加图像的最佳方式是什么?当我使用下面的代码时，我得到一个javascript错误，说appendChild()不是函数。

I am wondering if it has something to do with how I get the SVG using the .html() method —perhaps what ever is returned is not being interpreted as a real SVG document??

我想知道它是否与我如何使用.html()方法获得SVG有关——也许返回的内容没有被解释为真正的SVG文档?

Any help much appreciated.

感谢任何帮助。

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

    });

1 个解决方案

#1

Here is one way of doing it:

有一种方法:

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