获取 SVG 路径部分(或拆分路径)



输入:

  • SVG 路径,可以由直线和曲线组成。
  • 此路径的长度百分比(例如路径的 50%(

输出:

  • SVG 路径,它是此路径的一部分,从开始到给定点的长度

path getPointAtLengthgetPathSegAtLength有一个很好的方法,因此我们可以以给定的长度获取段,但仍然不清楚如何"拆分"该段以及所需的路径。

我想知道这个问题是否有一些统一的解决方案。

正如您所发现的,SVGPathElement具有单步执行路径段的方法。 您只需要逐步浏览它们,直到到达必须细分的那个。 请注意,这些 API 正在发生变化。因此,您可能需要对某些浏览器使用 polyfill - 具体取决于您是选择使用新的还是旧的 API

唯一难以细分的路径段类型是二次曲线和三次贝塞尔曲线。 但这些实际上也很容易,使用De Casteljau的算法。

参见:将贝塞尔曲线分成相等的两半

这个答案解释了除以立方贝塞尔。然而,二次版本非常相似。

最新更新