如何使用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視頻上繪製形狀？

回答

相關問題