What is svg-path-properties?
The svg-path-properties npm package provides utilities for working with SVG path data. It allows you to compute various properties of SVG paths such as length, point at a given length, tangent angle, and more.
What are svg-path-properties's main functionalities?
Compute Path Length
This feature allows you to compute the total length of an SVG path. The code sample demonstrates how to create an instance of svgPathProperties with a given path and then compute its total length.
const { svgPathProperties } = require('svg-path-properties');
const properties = new svgPathProperties('M10 10 H 90 V 90 H 10 Z');
const length = properties.getTotalLength();
console.log(length);
Get Point at Length
This feature allows you to get the coordinates of a point at a specific length along the path. The code sample shows how to get the point at length 50 on the given path.
const { svgPathProperties } = require('svg-path-properties');
const properties = new svgPathProperties('M10 10 H 90 V 90 H 10 Z');
const point = properties.getPointAtLength(50);
console.log(point);
Get Tangent Angle at Length
This feature allows you to get the tangent angle at a specific length along the path. The code sample demonstrates how to get the tangent angle at length 50 on the given path.
const { svgPathProperties } = require('svg-path-properties');
const properties = new svgPathProperties('M10 10 H 90 V 90 H 10 Z');
const tangent = properties.getTangentAtLength(50);
console.log(tangent);
Get Properties at Length
This feature allows you to get all properties (point, tangent, etc.) at a specific length along the path. The code sample shows how to get all properties at length 50 on the given path.
const { svgPathProperties } = require('svg-path-properties');
const properties = new svgPathProperties('M10 10 H 90 V 90 H 10 Z');
const allProperties = properties.getPropertiesAtLength(50);
console.log(allProperties);
Other packages similar to svg-path-properties
svg-pathdata
The svg-pathdata package provides tools to parse, transform, and encode SVG path data. It offers functionalities to manipulate path data but does not focus on computing properties like length or tangent angles.
svg-path-bbox
The svg-path-bbox package is used to calculate the bounding box of an SVG path. While it provides useful geometric calculations, it does not offer the same range of path property computations as svg-path-properties.
svg-path-parser
The svg-path-parser package is designed to parse SVG path strings into a more manageable format. It focuses on parsing and does not provide utilities for computing path properties like length or points at specific lengths.
svg-path-properties
Pure Javascript alternative to getPointAtLength(t) and getTotalLength() functions. Works with Canvas and Node
JavaScript can access to path elements properties in a browser, such as its length and the point at a given length. Unfortunately, this can't be achieved using a Canvas element or when working with node. This library can be used to replace this need. It has no dependencies on other JavaScript libraries.
INSTALL
To use with npm, just type
npm install svg-path-properties
USAGE
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);
var parts = properties.getParts(); --> Gets an array with the different sections of the path, each element containing the initial and final points, the length and the curve function
Check this block to see how it works with the browser.
The TypeScript declaration file is available too, since version 0.5
CREDITS
Some parts of the code are taken from other libraries or questions at StackOverflow:
For Bézier curves:
For path parsing: