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

【问题标题】：How can I draw a single svg path with variable width stroking? [closed]如何绘制具有可变宽度描边的单个 svg 路径？ [关闭]
【发布时间】：2018-05-20 06:59:29
【问题描述】：

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

【问题讨论】：

这些部分似乎没有相互联系，所以可能没有。
假设它们是连接的。还是不行吗？
如果它们是连接的，我会假设你可以只用一个 svg 路径来绘制它。
是或否，这个问题不适合 Stack Overflow。
我投票结束这个问题作为题外话，因为这个是/否问题不是编程问题。如果问题变成“我该怎么做”，那就太宽泛了。

标签： javascript svg

【解决方案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>

【讨论】：