html - 如何使用SVG在圆中绘制直角弧？

Question

我正在尝试在 svg 圆的右侧做一个类似弧形的切割。

当前结果:

.ant-avatar-group {
    display: inline-flex;
}

.ant-avatar {
   width: 38px;
   height: 38px;
   line-height: 38px;
   font-size: 19px;
   background: #ccc;
   border-radius: 50%;
}

<div class="ant-avatar-group">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.15" cx="20" cy="20" r="19" fill="#F6BB43" stroke="white" stroke-width="2">
</circle>
</svg>

<span class="ant-avatar"> </span>
</div>

预期结果:

尝试过的代码:

已更改，cx="20" 更改为 cx="30"

另外添加，

margin-left: -8px; 和 border-left: 4pxsolid #fff 到 .ant-avatar 使头像图标扭曲右侧头像圆圈(失去其原始大小)。

.ant-avatar-group {
    display: inline-flex;
}

.ant-avatar {
   width: 38px;
   height: 38px;
   line-height: 38px;
   font-size: 19px;
   background: #ccc;
   border-radius: 50%;
}

<div class="ant-avatar-group">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle opacity="0.15" cx="30" cy="20" r="19" fill="#F6BB43" stroke="white" stroke-width="2">
</circle>
</svg>

<span class="ant-avatar"> </span>
</div>

但这并没有给出预期的输出，因为需要进行弧形切割。请帮助我实现使 svg 圆与给定的预期结果一样具有右弧的结果。

提前非常感谢。

Answer 1

正如我所评论的，我会将两个圆圈放入 svg 中。对于图像，您可以使用clipPath将其剪切成圆形。

对于另一个圆圈，我使用了一个 mask ，这样你就可以看穿，因为 mask 在其中切了一个圆孔。

在 CSS 中，我向 svg 添加了背景。你可以删除它

svg{width:300px; background:#efefef}

<svg viewBox="0 0 60 40">
  <defs>
    <mask id="m">
      <rect fill="white" x="0" y="0" width="100" height="40" />
      <circle cx="40" cy="20" r="18" fill="blabk" />
    </mask>
    <clipPath id="clip">
      <circle cx="40" cy="20" r="16" fill="00f" />
    </clipPath>
  </defs>
  <circle opacity="1" cx="20" cy="20" r="16" fill="#F6BB43" mask="url(#m)" />

  <image href="https://assets.codepen.io/222579/darwin300.jpg" x="21" y="2" width="35" height="35" clip-path="url(#clip)" />
</svg>