SVG comes with the getTotalLength() and getPointAtLength() methods, which are useful for animations or adding markers at the paths.
Calculating these values using Node or the Canvas element can be quite complicated. This library allows doing this and more things.
The usage is very simple, just pass the path into the class and call the needed methods:
var path = require("svg-path-properties"); var properties = path.svgPathProperties("M0,100 Q50,-50 100,100 T200,100"); var length = properties.getTotalLength(); var point = properties.getPointAtLength(200); var tangent = properties.getTangentAtLength(200); var allProperties = properties.getPropertiesAtLength(200);
To use it with npm, just type:
npm install svg-path-properties
To it in the browser, add:
To calculate the functions and parsing the paths, I've taken information and code from several places. They are basically these