获取 SVG 路径部分（或分割路径）

Question

输入：

• SVG 路径，可能由直线和曲线组成。
• 此路径的百分比长度（例如路径的 50%）

输出：

• svg 路径，该路径是从起点到给定长度点的路径的一部分。

path getPointAtLength 和 getPathSegAtLength 有一个很好的方法，所以我们可以得到给定长度的段，但仍然不清楚如何“拆分”这个段和所需的路径。

不知道有没有统一的解决方案。

Answer 1

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

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

见：Divide bezier curve into two equal halves

该答案解释了划分三次贝塞尔曲线。但是二次版本非常相似。