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 pletely. Is there a function that will allow me to get a subpath? A drawing library isn't really an option for me.

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 pletely. Is there a function that will allow me to get a subpath? A drawing library isn't really an option for me.

• javascript
• svg
• drawing

• Did you ever get an answer to this question - and would it work 5+ years on ? Interested to know. – Vanquished Wombat Commented Nov 3, 2020 at 7:54

1 Answer 1

Yes there is, it's called getPathSegAtLength (available on path elements) and it returns an index into the pathSegList, that index can e.g 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 patible to use the interface defined in SVG 1.1 right now.