html - 用透明度隐藏部分形状？

Question

有没有一种方法可以隐藏您在 SVG 中绘制的部分内容，而无需用其他形状覆盖它？

例如，我正在尝试创建一个空圆，其中从一个部分切出一个切片。我能够实现我想要的外观，但图像在我想要隐藏的切片上不透明。如果我更改其所在页面的背景颜色，我也必须更改矩形的颜色。

我研究过 SVG 裁剪，但看起来这是为了隐藏区域之外的内容，而我正在寻找相反的方法。我是不是用错了方法？

<svg width="60" height="60">
  <circle cx="30" cy="30" r="20" stroke-width="8" style="fill:none;stroke:#000;" />
  <rect height="8" width="22" y="26" fill="lightblue"/>
</svg>

Answer 1

我要找的是 SVG mask。

我必须在由两部分组成的圆上创建一个蒙版:

1. 覆盖整个图像的白色矩形(白色:显示)
2. 我想隐藏的黑色矩形 (black: hide)

代码如下所示。

<svg width="60" height="60">
  <defs>
    <mask id="slice">
      <rect width="100%" height="100%" fill="white"/>
      <rect height="8" width="22" y="26" fill="black"/>
    </mask>
  </defs>
  <circle cx="30" cy="30" r="20" stroke-width="8" style="fill:none;stroke:#000;" mask="url(#slice)"/>
</svg>