如何在 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 中使用了 force-layout，它可能非常大，具体取决于数据的输入。所以我想把图形本身放在第一个大svg中，其他信息比如文本放在较小的第二个svg中。如果带有 div 元素的解决方案可能更好，请告诉我。

Answer 1

只需在第一个 SVG 中附加另一个 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);