隐藏透明部分形状？

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. 我要隐藏的黑色矩形（黑色：隐藏）

代码如下所示。

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