如何使用SVG在HTML5视频上绘制形状？ [英] How do I draw a shape on an HTML5 video using SVG?
问题描述
我正在尝试在HTML5视频的基础上绘制形状，但我很难弄清楚如何做到这一点。我知道如何在视频顶部应用遮罩：
I am trying to draw shapes on top of an HTML5 video, but am having trouble figuring out how to do it. I know how to apply a mask on top of the video:
<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>
但我该如何在视频顶部绘制折线呢？
But how do I do something like draw a polyline on top of the video?
<polyline id="line" points="0,0 25,25, 25,50 75,50 100,100, 125,125"
style="fill:none;stroke:orange;stroke-width:3" />
我可以在页面的其他地方画线，如下所示：
I can draw the line elsewhere on the page, like so:
<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>
但我无法弄清楚如何在视频之上获取该行。任何帮助将不胜感激！
But I just can't figure out how to get the line on top of the video. Any help would be greatly appreciated!
推荐答案
是的，css解决方案是一个选项。尝试将这两个元素置于一个div中或（如jörn所指出的）绝对定位。 z-index非常有用，以确保你的svg确实在最顶层。
yes, css solution is one option. try to put those two elements above either in one div or (as jörn pointed out) with absolute positioning. z-index is very useful, to make sure your svg is really on top.
<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>
这篇关于如何使用SVG在HTML5视频上绘制形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
