How to use a svg inside a svg?

Question

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.

score 1 · Accepted Answer · answered Apr 04 '17 at 23:50

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

answered Apr 04 '17 at 23:50

Jordan Soltman

3,795
17
31

Not sure if i did it wrong. But the screen is totally white, because it is a white svg on a other white svg? – Hansi Schmidt Apr 04 '17 at 23:54
They have no default styling. They are just transparent. – Jordan Soltman Apr 04 '17 at 23:57

How to use a svg inside a svg?

1 Answers1

Linked