Question

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

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

Answer 1

是的，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>

Answer 2

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

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

上面的示例应该从页面顶部定位svg 20 px，从左边定位40px

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

2 个答案: