The nested in foreignobject svg does not appear

Question

The nested in foreignobject svg does not appear. What am I doing wrong here?

   

var svg = d3.select("#drawRegion")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%");
svg.append("rect")
  .attr("x", "0")
  .attr("y", "0")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "yellow");

var fObj = svg.append("foreignobject");
fObj
  .attr("x", "10%")
  .attr("y", "10%")
  .attr("width", "80%")
  .attr("height", "80%")
  .attr("viewBox", "0 0 80 80")
  .attr("preserveAspectRatio", "xMidYMin slice");
  
  var scrollDiv = fObj.append("div");
  scrollDiv
  .style("width", "100%")
  .style("height", "100%")
  .style("overflow", "scroll");
  
  var scrollSvg = scrollDiv
  .append("svg");
  
  scrollSvg
  .attr("x", 0)
	.attr("y", 0)
  .attr("width", "500%")
  .attr("height", "500%");
  
  var rectP = scrollSvg
  .append("rect");
  
  rectP
  .attr("x", 0)
	.attr("y", 0)
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "cyan");

<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

  
</svg>

I am expecting add the main svg -> foreignobject -> div -> svg. And by doing that I am hoping to get a nested scrollable svg element. But for some reasons everything starting with foreignobject is not displayed. I do not know what to try.

After checking the console I did not find any errors there.

Here is a jsfiddle.

Answer 1

It's foreignObject, not foreignobject (SVG is case sensitive).

Also d3 requires html tags to be prefixed by xhtml:

var svg = d3.select("#drawRegion")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%");
svg.append("rect")
  .attr("x", "0")
  .attr("y", "0")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "yellow");

var fObj = svg.append("foreignObject");
fObj
  .attr("x", "10%")
  .attr("y", "10%")
  .attr("width", "80%")
  .attr("height", "80%")
  .attr("viewBox", "0 0 80 80")
  .attr("preserveAspectRatio", "xMidYMin slice");
  
  var scrollDiv = fObj.append("xhtml:div");
  scrollDiv
  .style("width", "100%")
  .style("height", "100%")
  .style("overflow", "scroll");
  
  var scrollSvg = scrollDiv
  .append("svg");
  
  scrollSvg
  .attr("x", 0)
	.attr("y", 0)
  .attr("width", "500%")
  .attr("height", "500%");
  
  var rectP = scrollSvg
  .append("rect");
  
  rectP
  .attr("x", 0)
	.attr("y", 0)
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "cyan");

#drawRegion {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: relative;
}

<div id="drawRegion">

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>