How can I copy the content of my SVG and append it to another SVG frame?

css, d3.js, javascript, jquery, svg

Solution

There are some solution.

- use javascript to clone the svg graphic.(it's basic approach.)

- copy graphic by "use" element.

This is sample svg code for second solution. If two svg elements exist in same html document, you can use this. It is static structure, so when you change mainSVG's graphic, svgMini will be changed automatically.

<svg id="mainSVG" height="200px" width="200px">
    <rect x="10" y="10" width="180" height="180" fill="red"/>
    <circle cx="100" cy="100" r="90" fill="orange"/>
</svg>
<!--wrap symbol and refer this-->
<svg id="svgMini" height="100px" width="100px">
    <defs>
        <symbol viewBox="0 0 200 200" id="resizable">
            <use xlink:href="#mainSVG"/>
        </symbol>
    </defs>
    <use xlink:href="#resizable" width="100%" height="100%"/>
</svg>

Problem

I have made a graph using D3 in a SVG frame. I want to show a duplicate of this in a smaller frame somewhere else. I've collected my SVG by using the following: ``` var svg = document.getElementById("mainSVG"); ``` or ``` var svg_inner = document.getElementById("mainSVG").innerHTML; ``` And I'd like to place the data from "svg_inner" into another svg: ``` <svg id="svgMini" class"picMenu" viewBox="0 0 918 598"> </svg> ``` or changing the id of "svg" somehow and placing it into a div or something div or similar. Is it possible to do this? What I'm trying to achieve is get the content of my current SVG, and show it somewhere else as well.

Original source