创建一个固定、垂直距离的SVG路径,使用JavaScript。

huangapple go评论157阅读模式
英文:

Create An SVG Path By A Fixed, Perpendicular Distance, With Javascript

问题

我有一个类似上面蓝色的SVG路径。如何创建一个与黑色路径相同距离(红色)嵌入在黑色路径的每一边的路径?我尝试缩放路径元素,但与每条线不在同一距离。

英文:

创建一个固定、垂直距离的SVG路径,使用JavaScript。

I have an SVG path like the blue one above. How can I create a Path like the black one, that is inset by a fixed distance (red) from every side of the black Path?
I try to scale the path element but that's not in a same distance with every line

答案1

得分: 1

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

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



英文:

Does this thread help you ?
https://stackoverflow.com/a/12723835/6852641

There are some nice examples such as http://jsfiddle.net/BbYV6/ which uses masks and stroke width to create an "offset path" effect

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

huangapple
  • 本文由 发表于 2020年1月3日 18:29:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/59576947.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定