Question

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

这里是link

<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>

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

1 个答案: