嵌套在foreignobject svg中没有出现

Question

nested in foreignobject svg 没有出现。我在这里做错了什么？

   

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>

我希望添加主 svg -> foreignobject -> div -> 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>

嵌套在foreignobject svg中没有出现

The nested in foreignobject svg does not appear

html

svg

nested

scrollable

d3.js