隐藏部分形状的透明度？

Question

有没有办法隐藏你在SVG绘制的部分内容而不用其他形状覆盖它？

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

我已经研究过SVG裁剪，但看起来这是为了隐藏某个区域之外的东西而我正在寻找相反的方法。我是以错误的方式解决这个问题吗？

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我要找的是SVG mask。

我必须在圆圈上创建一个由两部分组成的面具：

1. 覆盖整个图像的白色矩形（白色：显示）
2. 我想隐藏的黑色矩形（黑色：隐藏）

代码如下所示。

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可能想要使用Image 1吗？

<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400"
 xmlns="http://www.w3.org/2000/svg" version="1.1">
  
  
 <path xmlns="http://www.w3.org/2000/svg" d="M 225,225 a150,150 0 1,1 0,100" fill="none" stroke="red" stroke-width="25"/>
</svg>