如何绘制具有可变宽度描边的单个 svg 路径？

Question

如何使用单个 svg 路径绘制此形状？

Answer 1

您可以使用单个路径来完成此操作，但目前没有可变宽度之类的东西stroke。fill相反，可以使用自身交叉的路径来绘制这样的形状：

#hide-stroke:checked ~ svg path {
  stroke: none;
}

svg {
  display: block;
}

<input id="hide-stroke" type="checkbox" />
<label for="hide-stroke">Hide stroke</label>

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0,0 200,100" >
   <path d="M20,80  q26,-100 53,-25  q26,75 53,0  q26,-90 53,0  q-26,-70 -45,-10  q-26,80 -70,0  q-25,-40 -37,0" 
         fill="black" stroke-width="1" stroke="limegreen" />
</svg>