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

Question

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

我使用以下代码收集了我的SVG：

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

或者

var svg_inner = document.getElementById("mainSVG").innerHTML;

我希望将“svg_inner”中的数据放入另一个SVG中：

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

</svg>

或者以某种方式更改“svg”的id，并将其放置在div或类似的地方。

这是否可能？我想要实现的是获取当前SVG的内容，并在其他地方显示它。

- Vanquiza

---

使用cloneNode()。 - Lars Kotthoff

可能是重复的问题：如何轻松地让两个SVG执行完全相同但大小不同的操作？ - Paulie_D

是的：http://d3js.org/，使用 d3.selectAll(".mysvg")； - G-Cyrillus

Answer 1

有一些解决方案。

1. 使用JavaScript克隆SVG图形（基本方法）。
2. 通过"use"元素复制图形。

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

---

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

- defghi1977

---

这个回答让我今天非常开心。谢谢 @defghi1977！ - iulian

Answer 2

我在你的另一个问题中回答了你：使用 d3.selectALL('.myclass') 而不是 d3.select('#myId')

---

演示

---

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

- G-Cyrillus