javascript - SVG - 如何将 切成两半？

Question

我需要在 javascript 中的特定点切割现有路径(曲线)。例如，如果我有以下路径:

<path stroke-width="3"
      stroke="black"
      stroke-linecap="round"
      stroke-linejoin="round"
      id="line_test"
      d="M125,165 C125,165 125,164 125,164">
</path>

据此，我可以这样得到中点:

var line = document.getElementById("line_test");
var length = line.getTotalLength();
var midpoint = line.getPointAtLength(length/2);

一旦我得到那个中点，我想完全删除路径的其余部分。有没有一个函数可以让我得到一个子路径？绘图库对我来说不是一个真正的选择。

Answer 1

是的，它叫做 getPathSegAtLength (在路径元素上可用)并返回 pathSegList 的索引，该索引可以例如用于在那里切片 pathSegList。

pathSegList是一个类似数组的列表，如果您使用一些最新的浏览器，您可以使用普通数组表示法遍历列表，但现在使用 SVG 1.1 中定义的接口(interface)更兼容。