Javascript 如何复制SVG的内容并将其附加到另一个SVG框架？

我已经在SVG框架中使用D3制作了一个图形。我想在其他地方的一个较小的框架中显示这个的副本

我通过以下方式收集了我的SVG：

var svg = document.getElementById("mainSVG");

或

我想将“svg_inner”中的数据放在另一个svg中：

<svg id="svgMini" class"picMenu" viewBox="0 0 918 598">

</svg>

或者以某种方式更改“svg”的id，并将其放入div或类似的东西中

---

有可能这样做吗？我试图实现的是获取当前SVG的内容，并将其显示在其他地方

有一些解决办法

使用javascript克隆svg图形（这是基本方法）

通过“使用”元素复制图形

这是第二个解决方案的svg示例代码。
如果同一html文档中存在两个svg元素，则可以使用此元素。
它是静态结构，因此当您更改mainSVG的图形时，svgMini将自动更改。

---

---

我在你的另一个问题中回答了你：使用

d3.selectALL（'.myclass'）

而不是

d3.select（'#myId'）

---

---

---

然后使用CSS和viewbox属性，您可以调整它们的大小，并让它们自己重新缩放。

用于此。可能重复的是：使用

d3。selectAll（.mysvg”）

；这个答案让我大吃一惊。谢谢@defghi1977！

<svg id="svgMini" class"picMenu" viewBox="0 0 918 598">

</svg>

<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>