Css SVG：使用组作为掩码

我试图制作一个SVG图像，其中我使用一组形状作为另一组形状的遮罩

基本上，我想要一组透明的形状，覆盖一个较大的形状并剪裁它，这样你可以通过它们看到页面背景（因为它们是透明的），但不能看到较大形状的填充或笔划

我试着将一个面具应用到一个大的形状上，这个形状有一个指向#overlays组的标记，但它似乎不起作用。指向单个覆盖层确实有效，但我不想为每个覆盖层都添加一个

代码笔：

顶部的形状是SVG，底部的形状是我想让它做的事情的图像

以下是SVG：

<svg>
  <defs>
    <mask id="clip-behind" >
        <rect id="bg" x="0" y="0" width="100%" height="100%" fill="white"/>
        <use  xlink:href="#overlays" fill='black' fill-opacity='1' />
    </mask>
  </defs>

  <rect
     mask="url(#clip-behind)"
     width="260" height="270"  x="50" y="50"
     fill='none' stroke-opacity='1' stroke='black' stroke-width='4'
   />

  <g id="overlays" fill='red' fill-opacity='0.25' stroke-opacity='1' stroke='red'>
    <rect id='overlay1' width="80"  height="80" x="280" y="150" />
    <rect id='overlay2' width="50" height="50" x="140" y="300" />
  </g>
</svg>

---

有人知道我做错了什么，或者是否有更好的方法吗？

你不能这样做，

使用alpha通道来确定遮罩的不透明度（黑色被剪裁，白色被保留）

因此，为了避免红色遮罩的半透明性，并且由于您无法更改用

复制的

中包含的元素的已设置

填充属性，因此您必须在
和文档中链接一个in
，不带属性，然后设置各自的属性：


非常透明：


正文{
背景色：#fff；
背景图像：线性梯度（#eee 0.1米，透明0.1米）；
背景尺寸：100%1.2米；
}
svg{
宽度：400px；
高度：400px；
}
非常感谢，你做到了！