Get SVG path part (or split path)

Question

Input:

SVG path, may consist of Lines and Curves.
percentage length of this path (say 50% of the path)

Output:

svg path that is part of this path from beginning to a given point at length.

There is a nice method on path getPointAtLength and also getPathSegAtLength so we can get the segment at the given length, but still not clear how to "split" this segment and the path that is needed.

I wonder is there some unified solution for the problem.

I am a bit new to the SVG. Considering the path is a line. What do you mean by 50% of the path?. Should the result be a line i.e 50% of original? — karthick, May 19 '17 at 22:42

score 1 · Accepted Answer · edited May 23 '17 at 12:10

As you have discovered, the SVGPathElement has methods to step through the segments of a path. You just need to step through them until you get to the one that you have to subdivide. Just be aware that those APIs are in the middle of changing. So you may need to use a polyfill for some browsers - depending on whether you choose to use the new or the old API

The only path segment type that is at all tricky to subdivide are the quadratic and cubic bezier curves. But those are actually pretty easy also, using De Casteljau's algorithm.

See: Divide bezier curve into two equal halves

That answer explains dividing a cubic bezier. However the quadratic version is very similar.

Get SVG path part (or split path)

1 Answers1