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.
There are some solution.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With