如何在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>