如何复制 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或div或类似的东西中。

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

Answer 1

有一些解决办法。

1. 使用 javascript 克隆 svg 图形。（这是基本方法。）
2. 通过“使用”元素复制图形。

这是第二个解决方案的示例 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>