How to use a svg inside a 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);

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.

回答1:

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);

来源：https://stackoverflow.com/questions/43219581/how-to-use-a-svg-inside-a-svg