SVG - How do I cut a <path> in half?

Question

I need to cut an existing path (curve) at a specific point in javascript. For example, if I have the following path:

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

From that, I could get the midpoint like so:

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

Once I get that midpoint, I want to remove the rest of the path completely. Is there a function that will allow me to get a subpath? A drawing library isn't really an option for me.

Answer 1

是的,它被称为getPathSegAtLength(在路径元素上可用)并且它将索引返回到pathSegList,该索引可以例如用于在那里切片pathSegList.

该pathSegList是一个类似数组的列表,如果你使用一些最新的浏览器就可以正常使用数组表示法来逐步列表中,但它更兼容的使用目前已经在SVG 1.1定义的接口.