4

我正在尝试在 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>

但我只是不知道如何在视频顶部放置线条。任何帮助将不胜感激！

4

2 回答 2

3

是的，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-12T12:59:57.210 回答
1

使用 CSS position:absolute 将您的 SVG 定位在您想要的位置。

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

上面的示例应该将 svg 放置在距页面顶部 20 像素和距左侧 40 像素的位置

于 2012-04-12T09:04:26.350 回答