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

时间:2014-04-23 14:32:27

标签: javascript jquery css svg d3.js

我在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的内容,并将其显示在其他地方。

2 个答案:

答案 0 :(得分:1)

有一些解决方案。

  1. 使用javascript克隆svg图形。(它的基本方法。)
  2. 复制图形&#34;使用&#34;元件。
  3. 这是第二个解决方案的示例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>
    

答案 1 :(得分:0)

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


<强> DEMO


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