我在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的内容,并将其显示在其他地方。
答案 0 :(得分:1)
有一些解决方案。
这是第二个解决方案的示例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属性,您可以调整它们的大小并让它们自行重新缩放。