代码之家 › 专栏 › 技术社区 › manymanymore

嵌套在foreignobject svg中的内容不会出现

scrollable nested svg d3.js html

1

manymanymore · 技术社区 · 6 年前

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 -gt; foreignobject -gt; div -gt; 静止无功发生器 . 通过这样做,我希望得到一个嵌套的滚动 静止无功发生器 元素。但出于某些原因 外来物 不显示。我不知道该试什么。

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

Here 是一个jsfiddle。

1 回复 | 直到 6 年前

1

Robert Longson 6 年前

它是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>