如何使用SVG在HTML5视频上绘制形状？

我试图在HTML5视频的顶部绘制形状，但无法找出如何去做。我知道如何在视频顶部应用蒙版：如何使用SVG在HTML5视频上绘制形状？

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>SVG Test</title> 
    </head> 
    <body> 
     <video class="target1" height="270px" width="480px" controls > 
      <source src="testVideo.webm" type="video/webm" /> 
     </video> 

     <!-- Apply a mask to the video --> 
     <style> 
      .target1 { mask: url("#mask1"); } 
     </style> 

     <!-- Define the mask with SVG --> 
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
       width="480px" height="270px"> 
      <defs> 
       <mask id="mask1" maskUnits="objectBoundingBox" 
         maskContentUnits="objectBoundingBox"> 
        <circle cx="0.25" cy="0.25" r="0.5" fill="white" /> 
       </mask> 
      </defs> 
     </svg> 
    </body> 
</html>

但是，我该如何在视频顶部绘制多段线？

<polyline id="line" points="0,0 25,25, 25,50 75,50 100,100, 125,125" 
    style="fill:none;stroke:orange;stroke-width:3" />

我可以在其他地方画线在页面上，就像这样：

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>SVG Test</title> 
    </head> 
    <body> 
     <video class="target1" height="270px" width="480px" controls > 
      <source src="testVideo.webm" type="video/webm" /> 
     </video> 

     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1200px" height="700px"> 
      <polyline id="line" points="0,0 25,25, 25,50 75,50 100,100, 125,125" 
       style="fill:none;stroke:orange;stroke-width:3" /> 
     </svg> 
    </body> 
</html>

但我就是无法弄清楚如何获得在视频之上线。任何帮助将不胜感激！

来源

2012-04-11 Steph

是，CSS的解决方案是一种选择。试着把这两个要素放在一个div中，或者（如jörn指出的）绝对定位。 z-index非常有用，可以确保您的svg真正处于最佳状态。

<div id="canvas"> 
    <video id="videoContainer"> (...) </video> 

    <svg id="svgContainer"> (...) </svg> 
</div> 


<style> 
    canvas{ position:relative; width:480px; height:240px; } 
    videoContainer{ position:relative; width:100%; height:100%; z-index:1 } 
    svgContainer{ position:relative; width:100%; height:100%; z-index:2 } 
</style>

来源

2012-04-12 12:59:57 longilong

啊哈，非常感谢！我不得不将videoContainer和svgContainer的位置更改为绝对位置，以便让它们工作，但您的解决方案正是我所期待的。感谢这个例子，它非常有帮助！ – Steph 2012-04-12 18:42:10

使用CSS位置：绝对位置将SVG放置在您想要的位置。

<style> svg { position:absolute; top:20px; left:40px; }</style>

上面的例子应的位置从页和40像素的顶部的SVG 20像素从左侧

来源

2012-04-12 09:04:26

这样做的伎俩，非常感谢您的帮助！ – Steph 2012-04-12 18:42:26

如何使用SVG在HTML5视频上绘制形状？

回答

相关问题