我正在尝试在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>
但我只是想不通如何在视频上方添加字幕。任何帮助将不胜感激！
是的，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>
使用CSS位置：绝对将SVG放置在所需位置。
<style> svg { position:absolute; top:20px; left:40px; }</style>
以上示例应将svg的位置从页面顶部移至20像素，从页面左侧移至40像素