Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Pomax/js-svg-path
A parser that turns SVG path strings into a JS object you can mess with.
https://github.com/Pomax/js-svg-path
Last synced: 6 days ago
JSON representation
A parser that turns SVG path strings into a JS object you can mess with.
- Host: GitHub
- URL: https://github.com/Pomax/js-svg-path
- Owner: Pomax
- Created: 2017-03-29T23:58:53.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-07-25T23:47:17.000Z (4 months ago)
- Last Synced: 2024-10-30T20:02:47.899Z (11 days ago)
- Language: JavaScript
- Size: 1.11 MB
- Stars: 63
- Watchers: 5
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# js-svg-path
A parser that turns SVG path strings into a JS object you can mess with. Basically if you want to mess around with `svg` paths, and you want the convenience of "points" rather than "a string" where it comes to the `d` attribute, this library's got you covered.
## Installation
`npm install js-svg-path`, with optional `--save` or `--save-dev` if you need it saved in your package.json file.
## Using this thing
Use in Node.js as:
```
var library = require('js-svg-path');
```
Or use in the browser as:
```
```
Easy-peasy.
## The API(s)
There are three objects, and one utility function, exposed in this API.
### library.parse(SVGPathString)
You'll want this 99.99% of the time. This function ingests an SVG path string, and returns an `Outline` object for you to do with as you please.
### library.Outline
The `Outline` object represents a full SVG path outline (which may consist of nested subpats). It is constructed as `new library.Outline()` and has the following API:
- `getShapes()` - Gets all shapes defined in the path that the outline was built on.
- `getShape(idx)` - This gets a specific subpath in an outline. For obvious reasons, `idx` starts at 0.
- `toSVG()` - Serialize this outline to an SVG path. This will yield a path with *absolute* coordinates, but is for all intents and purposes idempotent: pushing in a path should yield an identically rendered path through `.toSVG()`
and the following API that most of the time you shouldn't care about but sometimes you will:
- `startGroup()` - on an empty outline, this essentially "starts recording an outline".
- `startShape()` - this marks the start of a new (sub)path in the outline.
- `addPoint(x,y)` - this adds a vertex to the outline, at absolute coordinate (x/y).
- `setLeftControl(x,y)` - this modifies the current point such that it has a left-side control point.
- `setRightControl(x,y)` - this modifies the current point such that it has a right-side control point.
- `closeShape()` - this signals that we are done chronicalling the current (sub)path.
- `closeGroup()` - this signals that we are done recording this outline entirely.
### library.PointCurveShape
This is an internal structure, but why not expose it to you? Each (sub)path in an outline is a PointCurveShape that is constructed with `new library.PointCurveShap()` and has the following API:
- `current()` - get the current point. This is relevant while an outline is being built.
- `addPoint(x,y)` - add a vertex to this shape.
- `setLeft(x,y)` - set the left control point for this vertex to (x/y).
- `setRight(x,y)` - set the right control point for this vertex to (x/y).
- `toSVG()` - serializes this "shape" (i.e. path) to SVG form.
### library.SVGParser
This is the main factory object and has very little in the way of its own API:
- `new library.SVGParser(outline)` - the SVGParser constructor takes an `Outline` object as constructor argument, which will be used to record parsing results.
- `getReceiver()` - returns the outline recorder passed into the constructor.
- `parse(path, [xoffset, yoffset])` - parses an SVG path, with an optional (xoffset/yoffset) offset to translate the entire path uniformly.
## An example:
Let's ingest an SVG's path, and then generate the SVG code that shows you where all the vectices and control points are:
```js
const path1 = find("svg path")[0];
const path2 = find("svg path")[1];
const d = path1.get("d");
var outline = new Receiver();
const parser = new SVGParser(outline);
parser.parse(d);
const vertices = [``];
outline.getShapes().forEach(shape => {
shape.points.forEach(p => {
let m = p.main, l = p.left, r = p.right;
if (l) {
vertices.push(``)
vertices.push(``)
}
if (r) {
vertices.push(``)
vertices.push(``)
}
vertices.push(``)
});
});
const svg2 = find("svg g")[1];
svg2.innerHTML = vertices.join('\n');
```
## Live demo?
Yeah alright: https://pomax.github.io/js-svg-path, and obviously to see *why* it works, view-source that.