Accepted answer

You are almost there. I have illustrated both ways to add elements in this codepen. The problem with the first approach is that svgNode is not a node, but a nodeList. You can add each node in the list with a loop, as you can see in the code:

var toAdd = svgNode.childNodes;
for (var i = 0; i < svgNode.childElementCount; i++){     

Regarding the second approach, I cannot say that there is anything wrong. I have imported a path from a different svg file and it is displayed in the lower part. The only detail that I changed is that I set the size of the svg element explicitly, not as 100%. Is it possible that it was not rendered because it was outside the visible part?


Just as a complement to the accepted answer: if you want to a pure D3 solution, you can use selection.append with a function. In your case:

d3.xml(svgfile).then(function(xml) { 
    var svgNode ="#MyGroup");
    svg.append(() => svgNode.node()) ;       

Or even shorter:

d3.xml(svgfile).then(function(xml) { 
    svg.append(() =>"#MyGroup").node()) ;       

Here is a demo using the Wikipedia SVG linked in the other answer:

var svgfile = "";

var svg ='body').append("svg")
  .attr("width", '120')
  .attr("height", '20');

d3.xml(svgfile).then(function(xml) {
  var svgNode ="#Wikipedia");
  svg.append(() => svgNode.node());
<script src=""></script>

Related Query

More Query from same tag