How to copy and paste SVG node using jQuery

Question

I have some SVG embedded into a web page and need to copy a particular SVG node (including it's children), then paste it back into the DOM. Only problem is, the SVG node doesn't appear after being pasted, which is probably because it's namespaced.

So, how can I copy and paste a namespaced SVG node? I imagine it'll be some sort of recursive function.

P.S. currently using jQuery's clone() method to copy the SVG node.

Test SVG:

<g>

    <rect>
    <text></text>

    <g>

        <circle>
        <rect>

    </g>

</g>

How do I recursively add that SVG to the DOM, remembering that createElementNS should be used because SVG is namespaced.

Answer 1

Seems like the solution can be acheived by using jQuery's $.parseXML function.

I thank you.

Answer 2

Maybe recursively create a copy and create elements using createElementNS

Like

$(mySvg).append(document.createElementNS("http://www.w3.org/2000/svg", "circle")); 

(from Is it possible to work with jquery and Svg directly (no plugins)?)