视频遮罩问题，视频尺寸为全宽，无法在svg徽标下覆盖

Question

我的视频遮罩有问题。 视频尺寸为全角，但不能覆盖SVG徽标。

这是链接

<div class="video-mask-otr">
<video class="bg-video" autoplay playsinline muted loop preload src=" http://urban.garotanzi.com/wp-content/uploads/2019/06/Background-Movie.mp4"></video>

    <svg class="banner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.46 223.7"><title>4Asset 1</title>

        <g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1">
             <defs>
                 <mask id="mask" x="0" y="0" width="100%" height="100%"> 
                      <rect fill="white" x="0" y="0" width="100%" height="100%"></rect>
                 <path d="M0,0V95A128.75,128.75,0,0,0,128.75,223.7h0V0Z"/><polygon points="144.72 223.7 273.46 223.7 273.46 0.7 144.72 223.7">     </mask>
            </defs>
            <rect fill="white" x="0" y="0" width="100%" height="100%"  id="mask-bg"></rect>
            </g></g></svg>

</div>

Answer 1

你有几个错误。 有未关闭的标签。 svg的宽高比与视频的宽高比不同。 我已将svg的viewBox更改为"0 0 273.46 153.82" 。

关于蒙版要了解的一件事是，与真正的蒙版不同，您只能通过蒙版看到。 如果您在面罩内，您的直肠与svg一样大，因此面罩与svg一样大，您会看到下面的所有东西。 我已经移除了这个矩形。

现在它可以工作，但是仍然存在一个问题。 遮罩不是您想要的，而是正好相反。解决方案是回到绘图板并重新绘制遮罩的路径。

 body{background:black} .video-mask-otr video,.video-mask-otr svg{position:absolute;top:0;} 

 <div class="video-mask-otr"> <video class="bg-video" autoplay playsinline muted loop preload src=" http://urban.garotanzi.com/wp-content/uploads/2019/06/Background-Movie.mp4" width="100%"></video> <svg class="banner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 273.46 153.82"><title>4Asset 1</title> <g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"> <defs> <mask id="mask" x="0" y="0" width="100%" height="100%"> <!--<rect fill="white" x="0" y="0" width="100%" height="100%"></rect>--> <path fill="white" d="M0,0V95A128.75,128.75,0,0,0,128.75,223.7h0V0Z"/> <polygon fill="white" points="144.72 223.7 273.46 223.7 273.46 0.7 144.72 223.7"/> </mask> </defs> <rect fill="white" x="0" y="0" width="100%" height="100%" id="mask-bg" style="mask: url(#mask)"></rect> </g></g></svg> </div>