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

Question

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

Answer 1

您可以使用单一路径执行此操作，但目前还没有可变宽度stroke。相反，可以使用fill在纵横交错的路径上绘制这样的形状：

＆＃13;

＆＃13;

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

svg {
  display: block;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;