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

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

我不仅想让它像笔触一样，我还想完全控制所谓的“填充描边”的形状，所以它可以是我想要的任何形状。所以它可以像那样逐渐变细，或者它可以是起泡的，或者无论如何。基本上我不希望它是笔触，而是填充，所以我可以更好地控制它。想知道如何做到这一点。

标签： svgfill

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>