svg-path-properties

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.

README

svg-path-properties

Pure Javascript alternative to getPointAtLength(t) and getTotalLength() functions. Works with Canvas objects and when 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

You can use it int he browser directly by including svg-path-properties.min.js from the dist directory

<script src="svg-path-properties.min.js"></script>

USAGE

The available methods are:

const path = require("svg-path-properties");
const properties = new path.svgPathProperties("M0,100 Q50,-50 100,100 T200,100");
const length = properties.getTotalLength();
const point = properties.getPointAtLength(200);
const tangent = properties.getTangentAtLength(200);
const allProperties = properties.getPropertiesAtLength(200);
const parts = properties.getParts();

Node:

const path = require("svg-path-properties");
const properties = new path.svgPathProperties("M0,100 Q50,-50 100,100 T200,100");

Including it from an import:

import { svgPathProperties } from "svg-path-properties";
const properties = new svgPathProperties("M0,100 Q50,-50 100,100 T200,100");

Including the script in the browser

Once the script tag has been included,

const properties = new svgPathProperties.svgPathProperties("M0,100 Q50,-50 100,100 T200,100");

Using new

Since svgPathProperties is a class, using new is the correct way to initilize it. For backwards compatibility reasons, the object can be get without it:

const properties = svgPathProperties("M0,100 Q50,-50 100,100 T200,100");

Some usage examples

• Drawing an animated path
• Label positioning
• Drawing stramlines arrows
• Using it to get a length when in node instead of the browser, as in the Flubber library
• SVG animations in React Native

Typescript

The TypeScript declaration file is available too, since version 0.5.0 From version 1.0.0, the whole library has been rewritten using TypeScript, and the types are auto-generated.

CREDITS

Some parts of the code are taken from other libraries or questions at StackOverflow:

For Bézier curves:

• http://bl.ocks.org/hnakamur/e7efd0602bfc15f66fc5, https://gist.github.com/tunght13488/6744e77c242cc7a94859
• http://stackoverflow.com/questions/11854907/calculate-the-length-of-a-segment-of-a-quadratic-bezier
• http://pomax.github.io/bezierinfo
• Arc elements calculation: https://github.com/MadLittleMods/svg-curve-lib/tree/f07d6008a673816f4cb74a3269164b430c3a95cb

For path parsing:

• https://github.com/jkroso/parse-svg-path