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

Yes there is, it's called getPathSegAtLength (available on path elements) and it returns an index into the pathSegList , that index can eg be used to slice the pathSegList there.

The pathSegList is an array-like list, and if you use some of the very latest browsers you can use normal array notation to step through the list, but it's more compatible to use the interface defined in SVG 1.1 right now.