SVG - 如何将<path>切成两半？

Question

SVG - 如何将<path>切成两半？

7

我需要用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);

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

- Fibericon

你是否曾经得到过这个问题的答案 - 并且它是否在5年后仍然有效？很想知道。 - Vanquished Wombat

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Erik Dahlström · Accepted Answer

有的，它叫做getPathSegAtLength（适用于路径元素），它返回pathSegList中的索引，该索引可以用来切割pathSegList。

pathSegList是一个类似数组的列表，如果您使用最新版本的浏览器，可以使用普通的数组符号来遍历该列表，但现在更兼容的方法是使用SVG 1.1中定义的接口。