Как сделать изогнутую заливку в 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>