nfroidure / Svg Pathdata
Licence: mit
Parse SVG PathDatas
Stars: ✭ 119
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Svg Pathdata
Vue Graph
⚡️ Vue components based on the JUI chart available in Vue.js
Stars: ✭ 114 (-4.2%)
Mutual labels: svg
React Native Svg Animations
SVG Animations wrapper for react-native.
Stars: ✭ 117 (-1.68%)
Mutual labels: svg
Python Altium
Altium schematic format documentation, SVG converter and TK viewer
Stars: ✭ 112 (-5.88%)
Mutual labels: svg
Svgdragtree
一个可以通过拖放 SVG 图标,来生成拥有树状结构的视图与数据的前端组件。 SDT example:
Stars: ✭ 113 (-5.04%)
Mutual labels: svg
Butterfly
🦋Butterfly,A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. (基于JavaScript/React/Vue2的流程图组件)
Stars: ✭ 2,343 (+1868.91%)
Mutual labels: svg
Blazor.diagrams
A fully customizable and extensible all-purpose diagrams library for Blazor
Stars: ✭ 119 (+0%)
Mutual labels: svg
Mocodo
Modélisation Conceptuelle de Données. Nickel. Ni souris.
Stars: ✭ 113 (-5.04%)
Mutual labels: svg
Apexcharts.js
📊 Interactive JavaScript Charts built on SVG
Stars: ✭ 10,991 (+9136.13%)
Mutual labels: svg
Svg Icon
👻 A lightweight library that makes it easier to use SVG icons in your Angular Application
Stars: ✭ 112 (-5.88%)
Mutual labels: svg
X6
🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
Stars: ✭ 2,686 (+2157.14%)
Mutual labels: svg
Bgrabitmap
📜 BGRABitmap graphics library made with Lazarus (Free Pascal).
Stars: ✭ 112 (-5.88%)
Mutual labels: svg
Teenyicons
Tiny minimal 1px icons designed to fit in the smallest places.
Stars: ✭ 1,631 (+1270.59%)
Mutual labels: svg
Elemental2
Type checked access to browser APIs for Java code.
Stars: ✭ 115 (-3.36%)
Mutual labels: svg
Snap.svg.zpd
A zoom/pan/drag/rotate plugin for Snap.svg (useful for view only)
Stars: ✭ 119 (+0%)
Mutual labels: svg
Geojson2svg
Converts geojson to svg string given svg viewport size and maps extent.
Stars: ✭ 117 (-1.68%)
Mutual labels: svg
Tabler Icons
A set of over 1400 free MIT-licensed high-quality SVG icons for you to use in your web projects.
Stars: ✭ 10,858 (+9024.37%)
Mutual labels: svg
svg-pathdata
Manipulate SVG path data (path[d] attribute content) simply and efficiently.
Usage
Install the module:
npm install --save svg-pathdata
or add the bundle to a script in your HTML.
Then in your JavaScript files:
const {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} = require('svg-pathdata');
With import syntax in TypeScript/ES6:
import {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} from 'svg-pathdata';
Without modules, using the global in the bundle:
const {SVGPathData, SVGPathDataTransformer, SVGPathDataEncoder, SVGPathDataParser} = svgpathdata;
Reading PathData
const pathData = new SVGPathData (`
M 10 10
H 60
V 60
L 10 60
Z`);
console.log(pathData.commands);
// [ {type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10},
// {type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60},
// {type: SVGPathData.VERT_LINE_TO, relative: false, y: 60},
// {type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60},
// {type: SVGPathData.CLOSE_PATH}]
Reading PathData in chunks
const parser = new SVGPathDataParser();
parser.parse(' '); // returns []
parser.parse('M 10'); // returns []
parser.parse(' 10'); // returns [{type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 }]
parser.write('H 60'); // returns [{type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 }]
parser.write('V'); // returns []
parser.write('60'); // returns [{type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 }]
parser.write('L 10 60 \n Z');
// returns [
// {type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 },
// {type: SVGPathData.CLOSE_PATH }]
parser.finish(); // tell parser there is no more data: will throw if there are unfinished commands.
Outputting PathData
const pathData = new SVGPathData (`
M 10 10
H 60
V 60
L 10 60
Z`);
// returns "M10 10H60V60L10 60Z"
encodeSVGPath({ type: SVGPathData.MOVE_TO, relative: false, x: 10, y: 10 });
// returns "M10 10"
encodeSVGPath({ type: SVGPathData.HORIZ_LINE_TO, relative: false, x: 60 });
// returns "H60"
encodeSVGPath([
{ type: SVGPathData.VERT_LINE_TO, relative: false, y: 60 },
{ type: SVGPathData.LINE_TO, relative: false, x: 10, y: 60 },
{ type: SVGPathData.CLOSE_PATH}])
// returns "V60L10 60Z"
Transforming PathData
This library can perform transformations on SVG paths. Here is an example of that kind of use.
Transforming entire paths
new SVGPathData (`
m 10,10
h 60
v 60
l 10,60
z`)
.toAbs()
.encode();
// return s"M10,10 H70 V70 L80,130 Z"
Transforming partial data
Here, we take SVGPathData from stdin and output it transformed to stdout.
const transformingParser = new SVGPathDataParser().toAbs().scale(2, 2);
transformingParser.parse('m 0 0') // returns [{ type: SVGPathData.MOVE_TO, relative: false, x: 0, y: 0 }]
transformingParser.parse('l 2 3') // returns [{ type: SVGPathData.LINE_TO, relative: false, x: 4, y: 6 }]
Supported transformations
You can find all supported transformations in src/SVGPathDataTransformer.ts. Additionally, you can create your own by writing a function with the following signature:
type TransformFunction = (command: SVGCommand) => SVGCommand | SVGCommand[];
function SET_X_TO(xValue = 10) {
return function(command) {
command.x = xValue; // transform command objects and return them
return command;
};
};
// Synchronous usage
new SVGPathData('...')
.transform(SET_X_TO(25))
.encode();
// Chunk usage
new SVGPathDataParser().transform(SET_X_TO(25));
Stats
Contributing
Clone this project, run:
npm install; npm test
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].