为什么SVG遮罩与CSS剪切路径不兼容？

Question

为什么SVG遮罩与CSS剪切路径不兼容？

3

我想在图片上方创建一个 svg 遮罩层，以下是我的代码，但它不起作用，我不知道错在哪里。我想要实现的效果是，在所有部分上方有一个圆形遮罩层，当向下滚动页面时，图片将逐个显示在圆形内部。

<div class="mask">
  <svg width="0" height="0">
    <defs>
        <clipPath id="circle-mask" clipPathUnits="objectBoundingBox">
            <circle cx="100" cy="100" r="40"/>
        </clipPath>
    </defs>
  </svg>    
</div>
<div class="section"><img src="https://images.unsplash.com/photo-1593532847202-e818146e134a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" /></div>
<div class="section"><img src="https://images.unsplash.com/photo-1593532847202-e818146e134a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" /></div>
 ....

<style>
.mask {position: absolute;top:0;left:0;width:100%;height: 100%;z-index:2;}
.section {width: 100%; height: 100vh;}
.section img {width: 100%; clip-path: url(#circle-mask);}
</style>

- BadJohnny

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

当使用 clipPathUnits="objectBoundingBox" 时，需要考虑范围在 [0,1] 的值，因此您需要像下面一样修正您的 clip-path。

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.section {
  height: 100vh;
  border:1px solid;
}

.section img {
  width:100%;
  height:100%;
  clip-path: url(#circle-mask);
}

<div class="mask">
  <svg width="0" height="0" >
    <defs>
        <clipPath id="circle-mask" clipPathUnits="objectBoundingBox">
            <circle cx="0.5" cy="0.5" r="0.4"/>
        </clipPath>
    </defs>
  </svg>
</div>
<div class="section"><img src="https://picsum.photos/id/1/400/400" ></div>
<div class="section"><img src="https://picsum.photos/id/1/400/400" style="width:auto;"></div>

你可以使用CSS遮罩获得相同的效果：

.section {
  height: 100vh;
  border:1px solid;
}

.section img {
  height:100%;
  width:100%;
  -webkit-mask: radial-gradient(farthest-side,#fff 80%,transparent 81%);
          mask: radial-gradient(farthest-side,#fff 80%,transparent 81%);
}

<div class="section"><img src="https://picsum.photos/id/1/400/400" ></div>
<div class="section"><img src="https://picsum.photos/id/1/400/400" style="width:auto;"></div>