如何在SVG中进行弯曲填充

Question

我可以像这样半弯：

<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="
      M 50, 100
      m 25, 0
      a 25,25 0 1,0 -50,0" fill="none" stroke="#000" stroke-width="10px" />
  </g>
</svg>

如果我尝试将其填充，则最终只能填充圆弧的一半，而不是填充圆弧周围的笔划/线。

<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="
      M 50, 100
      m 25, 0
      a 25,25 0 1,0 -50,0" fill="#000" width="10px" />
  </g>
</svg>

我希望能够绘制与笔触形状相同的填充物，因此我可以以自定义方式逐渐缩小“笔触”的末端，使其看起来像真正的笔触。

我不仅想使其像笔触一样，而且我想完全控制所谓的“填充笔触”的形状，因此我可以选择它。因此它可以像这样逐渐变细，也可以像气泡一样。基本上，我不希望它是笔触，而是要填充，因此我可以对其进行更多控制。想知道如何做到这一点。

Answer 1

这是您要寻找的吗？

<svg viewBox="0 0 100 200" width="300" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path d="
      M 50, 100
      m 25, 0
      a 25,25 0 1,0 -50,0
      h 10
      A20,20 0 0,1 75,100z" />
  </g>
</svg>