How can I add an element to the SVG DOM



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

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)

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.

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.

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??

Any help much appreciated.

    function saveImage(){

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



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

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

        // Append image to SVG

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






Here is one way of doing it:

var svgimg = document.createElementNS('','image');
svgimg.setAttributeNS('','href', 'myimage.jpg');
svgimg.setAttributeNS(null, 'visibility', 'visible');


Facebook Comments

Post a comment