UNPKG

shape2path/README.md

Version:

2.28 kBMarkdownView Raw

1# shape2path
2[![Build Status](https://travis-ci.org/HarryStevens/shape2path.svg?branch=master)](https://travis-ci.org/HarryStevens/shape2path)
3
4Convert SVG's [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://bl.ocks.org/HarryStevens/944fc151f210ddf6bd6ebaeda12c3d05).
5
6## Installation
7### npm
8```bash
9npm install shape2path --save
10```
11```js
12var shape2path = require("shape2path");
13```
14
15### Web browser
16You can use the CDN from unpkg.
17```html
18<script src="https://unpkg.com/shape2path/lib/shape2path.js"></script>
19<script src="https://unpkg.com/shape2path/lib/shape2path.min.js"></script>
20```
21If you'd rather host it yourself, download `shape2path.js` or `shape2path.min.js` from the [`lib` directory](https://github.com/HarryStevens/shape2path/tree/master/lib).
22```html
23<script src="path/to/shape2path.js"></script>
24<script src="path/to/shape2path.min.js"></script>
25```
26
27## API
28shape2path's functions take an options object whose properties correspond to the attributes of an SVG shape and returns an SVG path's `d` attribute.
29
30<a name="circle" href="#circle">#</a> shape2path.**circle**(*options*)
31
32Draw a path shaped like a [circle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle).
33
34<a name="ellipse" href="#ellipse">#</a> shape2path.**ellipse**(*options*)
35
36Draw a path shaped like an [ellipse](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse).
37
38<a name="line" href="#line">#</a> shape2path.**line**(*options*)
39
40Draw a path shaped like a [line](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line).
41
42<a name="polygon" href="#polygon">#</a> shape2path.**polygon**(*options*)
43
44Draw a path shaped like a [polygon](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon).
45
46<a name="polyline" href="#polyline">#</a> shape2path.**polyline**(*options*)
47
48Draw a path shaped like a [polyline](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline).
49
50<a name="rect" href="#rect">#</a> shape2path.**rect**(*options*)
51
52Draw a path shaped like a [rectangle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect). Add `rx` or `ry` properties to the options to round the corners.

1	`# shape2path`
2	`[![Build Status](https://travis-ci.org/HarryStevens/shape2path.svg?branch=master)](https://travis-ci.org/HarryStevens/shape2path)`
3
4	`Convert SVG's [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://bl.ocks.org/HarryStevens/944fc151f210ddf6bd6ebaeda12c3d05).`
5
6	`## Installation`
7	`### npm`
8	```bash
9	`npm install shape2path --save`
10	```
11	```js
12	`var shape2path = require("shape2path");`
13	```
14
15	`### Web browser`
16	`You can use the CDN from unpkg.`
17	```html
18	`<script src="https://unpkg.com/shape2path/lib/shape2path.js"></script>`
19	`<script src="https://unpkg.com/shape2path/lib/shape2path.min.js"></script>`
20	```
21	If you'd rather host it yourself, download `shape2path.js` or `shape2path.min.js` from the [`lib` directory](https://github.com/HarryStevens/shape2path/tree/master/lib).
22	```html
23	`<script src="path/to/shape2path.js"></script>`
24	`<script src="path/to/shape2path.min.js"></script>`
25	```
26
27	`## API`
28	shape2path's functions take an options object whose properties correspond to the attributes of an SVG shape and returns an SVG path's `d` attribute.
29
30	`<a name="circle" href="#circle">#</a> shape2path.circle(options)`
31
32	`Draw a path shaped like a [circle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle).`
33
34	`<a name="ellipse" href="#ellipse">#</a> shape2path.ellipse(options)`
35
36	`Draw a path shaped like an [ellipse](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse).`
37
38	`<a name="line" href="#line">#</a> shape2path.line(options)`
39
40	`Draw a path shaped like a [line](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line).`
41
42	`<a name="polygon" href="#polygon">#</a> shape2path.polygon(options)`
43
44	`Draw a path shaped like a [polygon](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon).`
45
46	`<a name="polyline" href="#polyline">#</a> shape2path.polyline(options)`
47
48	`Draw a path shaped like a [polyline](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polyline).`
49
50	`<a name="rect" href="#rect">#</a> shape2path.rect(options)`
51
52	Draw a path shaped like a [rectangle](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect). Add `rx` or `ry` properties to the options to round the corners.