是否可以有多个带有剪辑路径的蒙版？

Posted 2023-03-05

【中文标题】是否可以有多个带有剪辑路径的蒙版？

【英文标题】：Is it possible to have multiple masks with clip-path?

【发布时间】：2016-10-05 07:25:57

【问题描述】：

嗨，

我想知道是否可以在同一个元素上使用多个掩码，就像这样：

clip-path:polygon(8% 0%, 8% 7%, 14% 12%), polygon(96.4%, 92% 96.4%, 97% 92.3%), polygon(97% 15%, 99% 13%, 99% 0%);

这样我就可以只显示元素中相互分离的某些区域。

谢谢。

【问题讨论】：

不，只是去阅读 w3c 上的规范或查看教程；）

有什么办法吗？

Myabe 堆放几个 div 并给每一个掩码？还是将面具混合成一个？

但是如果它们是分离的形状，如何混合它们呢？

像这样：codepen.io/anon/pen/pbjjRd 使用像 cssplant.com/clip-path-generator 这样的生成器帮助您自己，您只需要手动在形状之间设置坐标

【参考方案1】：

如果您使用带有 SVG 定义的 <clipPath> 的剪辑路径，这是可能的

.clip-svg 
  clip-path: url(#myClip);

<img class="clip-svg" src="https://picsum.photos/id/1015/600/400">

<svg  >
  <defs>
    <clipPath id="myClip">
      <polygon points="400,50 400,320, 140,300"/>
      <polygon points="450,10 500,200 600,100" />
      <polygon points="150,10 100,200 300,100" />
    </clipPath>
  </defs>
</svg>

确认可在 Chrome 60、Firefox 55、Edge 85 中运行。不幸的是，在 IE 中无法运行。

完整的浏览器支持信息here。

【讨论】：

我刚刚在 Edge 和 IE11 中测试了你的代码 sn-p，它工作正常。我是否缺少有关支持的内容？此外，MDN 说，“以下任意数量的元素，以任何顺序......”这似乎表明您的解决方案是适当的用法developer.mozilla.org/en-US/docs/Web/SVG/Element/…

看起来它在最新版本的 Edge 中可以工作，只是在 3 年前还不行！我已经在 IE11 中进行了测试，它只显示了整个图像。 AFAIK IE11 不支持以这种方式在 html 元素上使用剪辑路径。

【参考方案2】：

您还可以使用 CSS 制作一个进出元素边界的多边形。见：

https://24ways.org/2018/clip-paths-know-no-bounds/

https://codepen.io/danwilson/pen/zMgrgb

div 
  width: 80vmin;
  height: 80vmin;
  background: hsl(181, 90%, 52%);
  
  clip-path: polygon(30px 20px, 40px 200px, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);

<div></div>

【参考方案3】：

要将剪辑路径用于多个剪辑，您需要将其视为蚀刻草图。您必须完成该对象并按照该线到达下一个对象。然后在移动到下一个对象之前返回到上一个对象。

img 
        clip-path: polygon(14% 12%, 8% 0%, 8% 7%, 14% 12%, 87% 96.4%, 92% 96.4%, 97% 92.3%, 87% 96.4%, 14% 12%, 97% 15%, 99% 13%, 99% 0, 97% 15%, 14% 12% );
    

<img class="clip-svg" src="https://picsum.photos/id/1015/600/400"/>

【参考方案4】：

您可以使用多个掩码。但是您不能使用多个剪辑路径。您可以将多个蒙版与剪辑路径一起使用。 您可以将 mask 属性与 clip-path 一起使用来制作多个蒙版。 喜欢这个例子。

#parent 
    display: flex;
    justify-content: center;
    align-items :center;
    height: 100vh;
    width: 100vh;
    background: linear-gradient(90deg, black 50%, yellow 50%);
 
 .multiple_mask
    height: 200px;
    width: 200px;
    background: red;
    clip-path: polygon(0% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 100%, 50% 50%);
    -webkit-mask-image: linear-gradient(45deg, black 50%, transparent 50%), linear-gradient(180deg, black, transparent);
    mask-image: linear-gradient(45deg, black 50%, transparent 70%);
 

<div id="parent">
    <div class="multiple_mask"></div>
  </div>

希望你能理解