Question

使用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>

Answer 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似乎已部分修复。在<p>中使用<foreignobject>时有效，而在<video>中则无效。将整个<SVG>放在<video>之后，并以绝对定位将它们彼此对齐，可以在视频上绘制SVG。尽管如此，它也应该在<foreignobject>内正常工作。

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

1 个答案: