https://github.com/harrystevens/shape2path
Convert SVG shapes to SVG paths
https://github.com/harrystevens/shape2path
Last synced: about 1 month ago
JSON representation
Convert SVG shapes to SVG paths
- Host: GitHub
- URL: https://github.com/harrystevens/shape2path
- Owner: HarryStevens
- License: mit
- Created: 2017-10-28T04:33:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-23T22:51:42.000Z (8 months ago)
- Last Synced: 2025-04-12T06:42:51.482Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://npmjs.com/package/shape2path
- Size: 864 KB
- Stars: 31
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# shape2path
Convert SVG [shapes](https://developer.mozilla.org/en-US/docs/Web/SVG/Element#Basic_shapes) to SVG [paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path). Check out [this demo](https://blocks.roadtolarissa.com/HarryStevens/944fc151f210ddf6bd6ebaeda12c3d05).
## Installation
If you use NPM, `npm install shape2path`. Otherwise, download the [latest release](https://github.com/HarryStevens/shape2path/blob/master/build/shape2path.zip). AMD, CommonJS, and vanilla environments are supported. In vanilla, a shape2path global is exported:
```html
const path = shape2path.circle()
.attr("r", 50) // Paths can be configured with constants...
.attr("cx", d => d.cx); // ...or with functions.
// The cy attribute defaults to zero because it was not specified.
path({cx: 50}); // M50,0 m-50,0 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0
```
## API
shape2path's methods return configurable functions that can be used to produce the [d attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) required to draw an SVG path identical to a corresponding SVG basic shape. Each method corresponds to a basic SVG shape: [circle](#circle), [ellipse](#ellipse), [line](#line), [polygon](#polygon), [polyline](#polyline), and [rect](#rect).
# shape2path.circle() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/circle2path.js "Source"), [Example](https://observablehq.com/@harrystevens/circle)
Creates a new [circle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle) generator whose [cx](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cx), [cy](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cy), and [r](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r) attributes are set to 0.
# shape2path.ellipse() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/ellipse2path.js "Source"), [Example](https://observablehq.com/@harrystevens/ellipse)
Creates a new [ellipse](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse) generator whose [cx](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cx), [cy](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cy), [rx](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx), and [ry](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/ry) attributes are set to 0.
# shape2path.line() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/line2path.js "Source"), [Example](https://observablehq.com/@harrystevens/line)
Creates a new [line](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line) generator whose [x1](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x1), [y1](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y1), [x2](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x2), and [y2](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y2) attributes default to 0.
# shape2path.polygon() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/polygon2path.js "Source"), [Example](https://observablehq.com/@harrystevens/polygon)
Creates a new [polygon](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon) generator whose [points](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/points) attribute defaults to "0,0".
# shape2path.polyline() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/polyline2path.js "Source"), [Example](https://observablehq.com/@harrystevens/polyline)
Creates a new [polyline](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline) generator whose [points](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/points) attribute defaults to "0,0".
# shape2path.rect() · [Source](https://github.com/HarryStevens/shape2path/blob/master/src/rect2path.js "Source"), [Example](https://observablehq.com/@harrystevens/rectangle)
Creates a new [rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect) generator whose [x](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x), [y](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y), [width](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width), [height](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height), [rx](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/rx), and [ry](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/ry) attributes default to 0.
# shape([datum])
Returns a string representing the path's d attribute, whose appearance will be identical to an SVG basic shape corresponding to the generator's attributes. If datum is specified, applies the generator's functional accessors on the specified datum.
# shape.attr(name[, value])
If value is specified, sets the attribute name to the specified value and returns the generator. For instance, to set a circle generator's cx attribute to 10:
```js
shape2path.circle()
.attr("cx", 10);
```
If the value is constant, sets the position to that constant. Constants must be specified as numbers unless you are setting a points attribute, in which case you can set the constant to a string (e.g. `"0,0 1,1"`) or an array of points (e.g. `[[0,0], [1,1]]`).
If value is a function, the function is evaluated for the passed datum, and the function's return value is used to set the attribute's value. For instance, to set a circle generator's cx attribute to a datum's "left" attribute:
```js
shape2path.circle()
.attr("cx", d => d.left)
({left: 10});
```
If value is not specified, returns the current value of the attribute. For all attributes other than points, the value defaults to 0; for points, it defaults to "0,0".