javascript - HTML 视频在 svg 中的 foreignObject 中不可见

Question

我的 HTML 视频在 svg 中的 foreignObject 中不可见。我在这里做错了什么？

HTML:

<div id="drawRegion">

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

CSS:

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

Javascript:

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

const fObj = mainSvg
  .append("foreignObject");

fObj
  .attr("x", "20%")
  .attr("y", "10%")
  .attr("width", "60%")
  .attr("height", "80%");

  const vidObj = fObj
  .append("xhtml:video");
  vidObj
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("href", "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4");

JSFiddle .

我检查了 foreignObject 是否实际创建并按预期发生，所以我希望视频只是出现在那里并填充它 (foreignObject)，但这并没有发生，所以我被困住了。

Answer 1

videos需要一个子源元素。

您还有一个语法错误，即 mainSvg 不存在，我也已更正。

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

const fObj = svg
  .append("foreignObject");

fObj
  .attr("x", "20%")
  .attr("y", "10%")
  .attr("width", "60%")
  .attr("height", "80%");
  
  const vidObj = fObj
  .append("xhtml:video");
  vidObj
  .attr("width", "100%")
  .attr("height", "100%")

  
  const src = vidObj.
  append("xhtml:source");
  src
    .attr("type", "video/mp4")
    .attr("src", "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4");

#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://d3js.org/d3.v5.min.js"></script>