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

Share Improve this question Follow edited Oct 19, 2013 at 15:18 swenedo 3,11499 gold badges3333 silver badges5050 bronze badges asked Oct 14, 2011 at 7:05 FibericonFibericon 5,8031313 gold badges3939 silver badges6565 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.