如何在 SVG 中拥有背景视频？答案

【问题标题】：How can you have a background video in an SVG?如何在 SVG 中拥有背景视频？
【发布时间】：2019-03-01 16:53:46
【问题描述】：

使用foreignObject，您可以在SVG 中使用<video> 标签，如下所示：

<foreignObject width="100" height="100" x="10" y="250">
  <video xmlns="http://www.w3.org/1999/xhtml" style="background: #ffffff; width: 150px; height: 50px;">
    <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"/>
  </video>
</foreignObject>

但是，我似乎无法让视频元素遵守 chrome 中的 z-index 规则。

理论上，SVG 中的元素应该按照它们在组中的顺序呈现，这确实适用于普通的foreignObject 标签，例如，这可以正确呈现红色、白色和蓝色部分：

<rect x="10" y="10" width="200" height="200" fill="red"/>
<foreignObject width="100" height="100" x="10" y="50">
  <div xmlns="http://www.w3.org/1999/xhtml" style="background: #ffffff; width: 150px; height: 50px;">
    Hello World
  </div>
</foreignObject>
<rect x="100" y="60" width="200" height="200" fill="blue"/>

...但是一旦您将<video> 粘贴在那里，它就不再起作用了。

这只是 chrome 中的一个错误吗？

我查看了错误跟踪器，虽然有大量与 SVG 相关的错误，但大多数相关错误都被标记为已解决。

我做错了吗？据我了解，SVG中<g>中项目的顺序应该决定z-index。

下面是一个最小的可重现测试用例。

（我也检查了 Firefox，但它也无法在那里工作......）

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400px" height="600px" viewBox="0 0 400 600" version="1.1">
  <g>
    <path style="fill-rule:nonzero;fill:rgb(72.54902%,100%,72.54902%);fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:10;" d="M 0.636719 0.496094 L 593.5 0.496094 L 593.5 840.257812 L 0.636719 840.257812 Z M 0.636719 0.496094 "/>
    
    <!-- Order is correctly rendered by sequence of elements in SVG -->
    <rect x="10" y="10" width="200" height="200" fill="red"/>
    <foreignObject width="100" height="100" x="10" y="50">
      <div xmlns="http://www.w3.org/1999/xhtml" style="background: #ffffff; width: 150px; height: 50px;">
        Hello World
      </div>
    </foreignObject>
    <rect x="100" y="60" width="200" height="200" fill="blue"/>

    <!-- Order is wrong for video element! -->
    <rect x="10" y="300" width="200" height="200" fill="red"/>
    <foreignObject width="100" height="100" x="10" y="250">
      <video xmlns="http://www.w3.org/1999/xhtml" style="background: #ffffff; width: 150px; height: 50px;">
        <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"/>
      </video>
    </foreignObject>
    <rect x="100" y="360" width="200" height="200" fill="blue"/>
</g>
</svg>

【问题讨论】：

标签： svg html5-video

【解决方案1】：

据我所知，这是一个 Chrome 错误，它仍然在 Chrome 版本 72.0.3626.119（官方构建）（64 位）中； Firefox 65.0.1（64 位）正确呈现它。我使用了下面的测试页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body style="background-color: grey;">
    <div style="position: absolute; left:0px; top:0px">
      <video width="480px" height="270px"  autoplay playinline muted loop src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
    </div>
    <svg width="1920px" height="1080px" style="position: absolute; left:0px; top:0px">
        <rect x=300 y=0 width=750 height=75 style="fill:rgb(255,20,20);stroke-width:3;stroke:rgb(0,0,0)" />
        <foreignobject x=500 y=0 width=480 height=270>
            <video width="480px" height="270px"  autoplay playinline muted loop src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
        </foreignobject>
        <rect x=300 y=100 width=750 height=75 style="fill:rgb(20,255,20);stroke-width:3;stroke:rgb(0,0,0)" />
        <foreignobject x=350 y=5 width=650 height=300>
            <div  style="width:480px; height:270px; font-size:20pt; border:6px; border-color:white;">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        </foreignobject>
        <rect x=300 y=200 width=750 height=75 style="fill:rgb(20,20,255);stroke-width:3;stroke:rgb(0,0,0)" />  
    </svg>         
  </body>
</html>

在 SVG 块中，（默认）z-index 应该按照内部元素的规范顺序（这就是规范所说的）。这也适用于foreignobject。 SVG ForeignObjects draw over all other elements in Chrome 似乎已部分修复。在<foreignobject> 中使用<p> 可以工作，而<video> 则不能。当您将整个 <SVG> 放在 <video> 之后并使用绝对定位将它们相互对齐时，您可以在视频上绘制 SVG。不过，它也应该在 <foreignobject> 中工作。

【讨论】：