Getpointatlength With Svg Not Working Correctly

I have a huge SVG file and all of its data is in one single element. It's something like this:

2. More accurate but trickier

Preprocess the path using the mypath.pathSegList property. That call returns a list of the path commands in the path.

1. Then loop through the pathSegList and take note of where each move command is. These mark the start of each subpath
2. As you loop through flattening the path, call the mypath.getPathSegAtLength() function. It returns the index of the pathseg entry at that length.
3. Compare that with the data you recorded in step 1 to see if you have moved into a new subpath
4. If you have, start a new polyline (or polygon)

One complication is that Chrome has deprecated support for the pathSegList property, and have instead moved to the new SVG2 API for this (mypath.getPathData()). Fortunately there is a polyfill for Chrome to add back support for the old API. Or you can switch to the new API and use a different polyfill so that the new API works on older browsers.

You can find details on the two polyfills here