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

有一些解决方案。

使用javascript克隆svg图形。（它的基本方法。）
复制图形＆＃34;使用＆＃34;元件。

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

Answer 2

我在您的另一个问题中回答：使用d3.selectALL('.myclass')代替d3.select('#myId')

<强> DEMO

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

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

2 个答案: