首页 > 解决方案 > 使用 Javascript 通过固定的垂直距离创建 SVG 路径

问题描述

在此处输入图像描述

我有一个像上面蓝色的那样的 SVG 路径。如何创建一个像黑色路径一样的路径,从黑色路径的每一侧插入固定距离(红色)?
我尝试缩放路径元素,但与每条线的距离不同

标签: javascriptsvg

解决方案


这个线程对你有帮助吗? https://stackoverflow.com/a/12723835/6852641

有一些很好的例子,例如http://jsfiddle.net/BbYV6/它使用遮罩和笔划宽度来创建“偏移路径”效果

<mask id="myMask" maskUnits="objectBoundingBox">
  <use xlink:href="#text" fill="#FFFFFF" stroke="#000000" stroke-width="20" stroke-linecap="square" stroke-linejoin="miter" stroke-miterlimit="40"/>
</mask>

推荐阅读