如何用SVG制作右侧带弧形缺口的圆形？

方法一：用SVG Path绘制带缺口的圆形 #

直接用path代替circle，能精确控制弧形缺口的形状和大小，避免调整cx导致整体偏移的问题：

<svg width="40" height="40" viewBox="0 0 40 40">
  <!-- 右侧带弧形缺口的圆形，可调整数值改变缺口大小 -->
  <path 
    d="M20,40 C31.046,40 40,31.046 40,20 
       C40,17.791 39.105,15.707 37.586,14 
       L20,14 C8.954,14 0,22.954 0,24 
       C0,35.046 8.954,40 20,40 Z" 
    fill="#e6f7ff"
  />
</svg>

• 调整37.586（缺口右侧端点的x坐标）可改变缺口宽度，数值越大缺口越窄
• 调整14（缺口的y坐标）可改变缺口高度，数值越大缺口越靠上

方法二：用SVG Mask裁剪圆形 #

如果想保留circle标签，可通过遮罩实现弧形缺口：

<svg width="40" height="40" viewBox="0 0 40 40">
  <defs>
    <!-- 定义遮罩：白色区域显示，黑色区域隐藏 -->
    <mask id="notched-circle-mask">
      <rect width="100%" height="100%" fill="white" />
      <!-- 右侧的圆形遮罩，形成弧形缺口 -->
      <circle cx="42" cy="20" r="6" fill="black" />
    </mask>
  </defs>
  <!-- 应用遮罩的圆形 -->
  <circle cx="20" cy="20" r="20" fill="#e6f7ff" mask="url(#notched-circle-mask)" />
</svg>

• 修改r="6"调整缺口大小，数值越大缺口越大
• 修改cx="42"调整缺口位置，数值越大缺口越靠右

与Ant Design Avatar组合的正确姿势 #

避免用margin-left和border-left破坏Avatar布局，改用相对定位实现对齐：

<div class="avatar-group">
  <!-- 带缺口的SVG -->
  <svg width="40" height="40" viewBox="0 0 40 40">
    <path 
      d="M20,40 C31.046,40 40,31.046 40,20 
         C40,17.791 39.105,15.707 37.586,14 
         L20,14 C8.954,14 0,22.954 0,24 
         C0,35.046 8.954,40 20,40 Z" 
      fill="#e6f7ff"
    />
  </svg>
  <!-- Ant Design Avatar -->
  <Avatar src="/avatar.png" size={40} className="avatar-overlay" />
</div>

对应的CSS：

.avatar-group {
  position: relative;
  width: 40px;
  height: 40px;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  /* 若需要让Avatar轻微覆盖缺口边缘，可调整left值，比如left: 2px; */
}

为什么之前的方法无效？ #

• 修改circle的cx只是让整个圆偏移，无法形成局部缺口
• 给.ant-avatar加border-left和margin-left会改变元素的盒模型，破坏Avatar内部的布局逻辑，导致变形

内容的提问来源于stack exchange，提问作者Hello World