Вложенный в Foreignobject SVG не появляется - PullRequest
Новая
       10

Вложенный в Foreignobject SVG не появляется

0 голосов
/ 11 июня 2018

Вложенный в 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, не отображается.Я не знаю, что попробовать.

После проверки консоли я не нашел там никаких ошибок.

Здесь - это jsfiddle.

1 Ответ

0 голосов
/ 11 июня 2018

Это 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>
...