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

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

这个问题似乎与 help center 中定义的范围内的编程无关。 .

已关闭 5 年前。

Improve this question

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

Answer 1

您可以使用单个路径来完成此操作，但目前没有可变宽度笔画之类的东西。相反，可以使用 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>