Question

这是我的CSS：

.svg-clipped {
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
}

这是我的HTML：

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1153.37 494"><g data-name="Layer 2"><clipPath id="svgPath"><path d="M1093.37 0H60A60 60 0 0 0 0 60v374a60 60 0 0 0 60 60l1033.37-179c39.28-6.29 60-26.86 60-60V60a60 60 0 0 0-60-60z" fill="#990000" fill-rule="evenodd" data-name="Layer 1"/></clipPath></g></svg>

<!--I can see this in the browser-->    
<img class="svg-clipped" style="margin: -500px 0 0 0;"  src="image.jpg" alt="" width="100%"/>

<!--I cannot see this in the browser-->
    <video class="svg-clipped" autoplay src="Video.mp4" style="margin: -500px 0 0 0; border: solid 3px #990000; width: 100%" ></video>

我正在尝试以svg的形式观看视频，但无法正常工作。我可以以svg fine的格式查看html中的图像，我正在使用该图像进行测试以确保剪辑效果，然后在我使视频正常工作后将其删除。我不了解发生了什么。

有人可以帮助我吗？

尝试将视频蒙版为SVG形状

0 个答案: