I answered to you in your other question: Use d3.selectALL('.myclass') instead'#myId')


and then with CSS and the viewbox attribute, you may size them ans have them rescale by themselves.


There are some solution.

  1. use javascript to clone the svg graphic.(it's basic approach.)
  2. 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"/>
<!--wrap symbol and refer this-->
<svg id="svgMini" height="100px" width="100px">
        <symbol viewBox="0 0 200 200" id="resizable">
            <use xlink:href="#mainSVG"/>
    <use xlink:href="#resizable" width="100%" height="100%"/>

Related Query

More Query from same tag