source: imaps-frontend/node_modules/svg-pathdata/README.md

main
Last change on this file was 79a0317, checked in by stefan toskovski <stefantoska84@…>, 3 days ago

F4 Finalna Verzija

  • Property mode set to 100755
File size: 5.2 KB
Line 
1# svg-pathdata
2> Manipulate SVG path data (path[d] attribute content) simply and efficiently.
3
4[![NPM version](https://badge.fury.io/js/svg-pathdata.svg)](https://npmjs.org/package/svg-pathdata)
5[![Run tests](https://github.com/nfroidure/svg-pathdata/actions/workflows/test.yml/badge.svg)](https://github.com/nfroidure/svg-pathdata/actions/workflows/test.yml)
6[![Dependency Status](https://david-dm.org/nfroidure/svg-pathdata.svg)](https://david-dm.org/nfroidure/svg-pathdata)
7[![devDependency Status](https://david-dm.org/nfroidure/svg-pathdata/dev-status.svg)](https://david-dm.org/nfroidure/svg-pathdata#info=devDependencies)
8[![Coverage Status](https://coveralls.io/repos/nfroidure/svg-pathdata/badge.svg?branch=master)](https://coveralls.io/r/nfroidure/svg-pathdata?branch=master)
9[![Code Climate](https://codeclimate.com/github/nfroidure/svg-pathdata.svg)](https://codeclimate.com/github/nfroidure/svg-pathdata)
10[![Dependency Status](https://dependencyci.com/github/nfroidure/svg-pathdata/badge)](https://dependencyci.com/github/nfroidure/svg-pathdata)
11
12## Usage
13
14Install the module:
15```sh
16npm install --save svg-pathdata
17```
18or add the [bundle](https://github.com/nfroidure/svg-pathdata/blob/master/lib/SVGPathData.js) to a script in your HTML.
19
20Then in your JavaScript files:
21```js
22const {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} = require('svg-pathdata');
23```
24
25With import syntax in TypeScript/ES6:
26```ts
27import {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} from 'svg-pathdata';
28```
29
30Without modules, using the global in the bundle:
31```js
32const {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} = svgpathdata;
33```
34
35
36## Reading PathData
37```js
38const pathData = new SVGPathData (`
39 M 10 10
40 H 60
41 V 60
42 L 10 60
43 Z`);
44
45
46console.log(pathData.commands);
47
48
49// [ {type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10},
50// {type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60},
51// {type: SVGPathData.VERT_LINE_TO, relative: false, y: 60},
52// {type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60},
53// {type: SVGPathData.CLOSE_PATH}]
54```
55
56## Reading PathData in chunks
57```js
58const parser = new SVGPathDataParser();
59
60parser.parse(' '); // returns []
61parser.parse('M 10'); // returns []
62parser.parse(' 10'); // returns [{type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 }]
63
64parser.write('H 60'); // returns [{type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 }]
65
66parser.write('V'); // returns []
67parser.write('60'); // returns [{type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 }]
68
69parser.write('L 10 60 \n Z');
70// returns [
71// {type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 },
72// {type: SVGPathData.CLOSE_PATH }]
73
74parser.finish(); // tell parser there is no more data: will throw if there are unfinished commands.
75```
76
77## Outputting PathData
78```js
79const pathData = new SVGPathData (`
80 M 10 10
81 H 60
82 V 60
83 L 10 60
84 Z`);
85// returns "M10 10H60V60L10 60Z"
86
87encodeSVGPath({ type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 });
88// returns "M10 10"
89
90encodeSVGPath({ type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 });
91// returns "H60"
92
93encodeSVGPath([
94 { type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 },
95 { type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 },
96 { type: SVGPathData.CLOSE_PATH}])
97// returns "V60L10 60Z"
98
99```
100
101## Transforming PathData
102This library can perform transformations on SVG paths. Here is
103 [an example of that kind of use](https://github.com/nfroidure/svgicons2svgfont/blob/aa6df0211419e9d61c417c63bcc353f0cb2ea0c8/src/index.js#L192).
104
105### Transforming entire paths
106```js
107 new SVGPathData (`
108 m 10,10
109 h 60
110 v 60
111 l 10,60
112 z`)
113 .toAbs()
114 .encode();
115// return s"M10,10 H70 V70 L80,130 Z"
116```
117
118### Transforming partial data
119Here, we take SVGPathData from stdin and output it transformed to stdout.
120```js
121const transformingParser = new SVGPathDataParser().toAbs().scale(2, 2);
122transformingParser.parse('m 0 0') // returns [{ type: SVGPathData.MOVE_TO, relative: false, x: 0, y: 0 }]
123transformingParser.parse('l 2 3') // returns [{ type: SVGPathData.LINE_TO, relative: false, x: 4, y: 6 }]
124```
125
126## Supported transformations
127You can find all supported transformations in
128 [src/SVGPathDataTransformer.ts](https://github.com/nfroidure/SVGPathData/blob/master/src/SVGPathDataTransformer.ts#L47).
129 Additionally, you can create your own by writing a function with the following signature:
130```js
131type TransformFunction = (command: SVGCommand) => SVGCommand | SVGCommand[];
132
133function SET_X_TO(xValue = 10) {
134 return function(command) {
135 command.x = xValue; // transform command objects and return them
136 return command;
137 };
138};
139
140// Synchronous usage
141new SVGPathData('...')
142 .transform(SET_X_TO(25))
143 .encode();
144
145// Chunk usage
146new SVGPathDataParser().transform(SET_X_TO(25));
147```
148
149
150## Stats
151
152[![NPM](https://nodei.co/npm/svg-pathdata.png?downloads=true&stars=true)](https://nodei.co/npm/svg-pathdata/)
153[![NPM](https://nodei.co/npm-dl/svg-pathdata.png)](https://nodei.co/npm/svg-pathdata/)
154
155## Contributing
156Clone this project, run:
157```sh
158npm install; npm test
159```
160
161# License
162[MIT](https://github.com/nfroidure/svg-pathdata/blob/master/LICENSE)
Note: See TracBrowser for help on using the repository browser.