https://github.com/larsgw/svg-path
Parse, normalise and create polylines with SVG paths
https://github.com/larsgw/svg-path
Last synced: 27 days ago
JSON representation
Parse, normalise and create polylines with SVG paths
- Host: GitHub
- URL: https://github.com/larsgw/svg-path
- Owner: larsgw
- License: mit
- Created: 2018-10-02T20:37:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-01-31T19:49:45.000Z (over 6 years ago)
- Last Synced: 2024-08-09T22:51:52.016Z (9 months ago)
- Language: JavaScript
- Size: 81.1 KB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SVG Path
This is a small (WIP) library to normalise SVG paths according to the spec, and create polylines and dimensions based on those normalised paths.
[](https://npmjs.org/package/@larsgw/svg-path)
[](https://travis-ci.org/larsgw/svg-path)
[](https://standardjs.com)
[](https://github.com/larsgw/citation.js/blob/master/LICENSE.md)
## Install
npm install @larsgw/svg-path
## Usage
```js
let {SvgPath} = require('@larsgw/svg-path')
let path = new SvgPath('M0 0 10 0h20 a15 15,1,0,1,-30 0')
```
### Normalise
```js
path.normalize()
// [
// {type: 'M', args: [0, 0]},
// {type: 'L', args: [10, 0]},
// {type: 'L', args: [30, 0]},
// {type: 'A', args: [15, 15, 1, 0, 1, 0, 0]}
// ]
```
Normalises all commands (relative, absolute, chained calls) into the absolute variants of A (arc), C (cubic bezier), L (line), M (move), Q (quadratic bezier) and
Z (close). Doesn't handle parameter correction for arc commands, that is currently dealt with in `getPolygons()`.
### Get polygons
```js
path.getPolygons()
// [
// [[0, 0], [10, 0], [30, 0], ..., [0, 0]]
// ]
```
Get polygons based on this path, one per M (move) command. Precision of polygons for ellipse arcs and bezier curve will be possible to change in the future.
### Get dimensions
```js
path.getDimensions()
// [
// {
// width: 30,
// height: 15,
// xmin: 0,
// xmax: 30,
// ymin: 0,
// ymax: 15 // may differ depending on the arc rendering precision
// }
// ]
```
Get dimensions based on the polygons mentioned above, one set per polygon.
### Stringify
```js
path.stringify()
// 'M0,0 L10,0 L20,0 A15,15 1 0 1 0,0'
```
Stringify a path. It will be possible to configure these in the future.
### Helper functions
* `SvgPath.parsePath(string path)` - parse path into list of type/args pairs. splits up chain calls
* `SvgPath.normalizeCommand(string type, int[] args, object context)` - normalize command given some context
* `int[] context.pos.start` - endpoint of the previous move command
* `int[] context.pos.prev` - endpoint of the previous command
* `int[] context.bezier.cubic` - previous cubic bezier control point
* `int[] context.bezier.quadratic` - previous quadratic bezier control point
* `boolean context.pathStart` - whether the command is the start of a new path component (e.g. the first coordinate pair of a move command)
* `SvgPath.commandToPolygon(object command, int[] prev)` - get polyline based on a command and a starting position (prev)
## License
MIT