Comment puis-je ajouter un <image> élément du DOM SVG

J'ai une page web avec une image jpg que l'utilisateur dessine un SVG doodle sur le dessus de l'aide de Raphaël.

Je veux permettre à l'utilisateur d'enregistrer une fusion de raster version de cette lorsqu'ils sont effectués (je vais faire autre chose avec la version SVG moi-même)

Lorsque l'utilisateur clique sur enregistrer, je veux ajouter que l'image de fond généré SVG DOM comme un élément, puis utiliser canvg pour écrire le SVG pour un élément canvas. Enfin, j'utilise le toDataUrl() la méthode pour le transformer en un fichier jpg.

Je ne peux pas obtenir au moyen de bits de travail —quelle est la meilleure façon d'ajouter de l'image pour les DOM? Lorsque j'utilise le code ci-dessous j'obtiens une erreur javascript qui dit appendChild() n'est pas une fonction.

Je me demande si elle a quelque chose à voir avec la façon dont je reçois le SVG en utilisant le .html() la méthode —peut-être que ce n'est jamais retourné n'est pas d'être interprétée comme un véritable document SVG??

Toute aide appréciée.

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

    });

OriginalL'auteur Danny Browne | 2012-06-02