如何在svg中使用svg？

Question

我使用的是D3.js，我试图在svg中创建一个svg。例如，我的第一个svg是这样的：

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

然后，我想在第一个svg中创建第二个svg，我希望它出现在我的第一个svg的右上角。那件事怎么可能？我考虑了第二个svg的宽度= 100和高度= 100的属性。这个问题的原因是，我使用了D3.js中的力布局，根据数据的输入，它实际上是很大的。所以我想把图本身放在第一个大的svg和其他的信息中，比如文本在小的第二个svg中。如果有div元素的解决方案更好，请告诉我。

Answer 1

只需在第一个中追加另一个SVG即可。

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

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