如何在svg中使用svg? [英] How to use a svg inside a svg?

问题描述

我正在使用D3.js，我尝试在svg中创建一个svg. 例如，我的第一个svg是这样的:

I am using D3.js and i try to create a svg inside an svg. For example my first svg is this:

  var svg = d3.selectAll('body')
      .append('svg')
      .attr('width',500)
      .attr('height',500);

然后，我想在第一个svg内创建第二个svg，我希望它出现在我的第一个svg的右上角.那怎么可能?我考虑了第二个svg的width = 100和height = 100的属性.这个问题的原因是，我在D3.js中使用了强制布局，根据数据的输入，它可能真的很大.因此，我想将图表本身放在第一个大的svg中，并将其他信息(如文本)放在较小的第二个svg中.如果使用div元素的解决方案可能更好，请告诉我.

Then i want to create a second svg inside this first one and i want it to appear at the upper right corner of my first svg. How is that possible? I thought about the attributes of width = 100 and height = 100 for the second svg. The reason for this question is, that i use the force-layout in D3.js and it can be realy big depending on the input of data. So i want to put the graph itself in the first big svg and other informations like texts in the smaller second svg. If a solution with div elements could be better, please let me know.

推荐答案

只需在第一个中附加另一个SVG.

Just append another SVG within the first.

  var svg = d3.selectAll('body')
      .append('svg')
      .attr('width',500)
      .attr('height',500);

  var innerSVG = svg.append('svg')
      .attr('width',100)
      .attr('height',100);

这篇关于如何在svg中使用svg?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！