嵌套在foreignobject svg中不会出现

Question

不会出现嵌套在foreignobject svg中的内容。我在这里做错了什么？

＆＃13;

＆＃13;

   

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

＆＃13;

<div id="drawRegion">

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

  
</svg>

＆＃13;

＆＃13;

＆＃13;

我希望添加主svg - ＆gt; foreignobject - ＆gt; div - ＆gt; svg。通过这样做，我希望得到一个嵌套的可滚​​动svg元素。但由于某些原因，未显示以foreignobject开头的所有内容。我不知道该尝试什么。

检查控制台后，我没有发现任何错误。

Here是一个jsfiddle。

Answer 1

它是foreignObject，而不是foreignobject（SVG区分大小写）。

d3也要求html标签以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>