svg-path-properties

Calculate the length, point and tangent at distance for an SVG path, to use it with node, Canvas or SVG element

Fork me on GitHub
Example

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.

View on Github

Usage

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);

Install

To use it with npm, just type:

npm install svg-path-properties

To it in the browser, add:

<script src="https://npmcdn.com/svg-path-properties/build/path-properties.js">

Tests and examples

Credits

To calculate the functions and parsing the paths, I've taken information and code from several places. They are basically these