vsvg path is a small lib to abstract the path data syntax for svgs into an json object. This help with manipulating points on the fly in javascript with ease. If you have an exsisting path data you can decode it into the structure as well.
$ npm install vsvg-paths
Encode a array with objects, aka points, into path data for svg path d attributes.
var paths = require( 'vsvg-paths' ),
path = document.getElementsByTagName( 'path' )[0],
data = paths.encode( [
{
x: 0,
y: 0
},
{
x: 10,
y: 10
},
{
x: 1,
y: 1,
relative: true
}
]); // M0 0 L10 10 l1 1
path.setAttribute( 'd', data );
see point types to see what point types are supported
Decode an existing set of path data into the JSON tree that you can pass to encode.
var paths = require( 'vsvg-paths' ),
path = 'M0 0 L10 10 l1 1',
data = paths.decode( path )
console.log( data )
/*
[
{
x: 0,
y: 0
},
{
x: 10,
y: 10
},
{
x: 1,
y: 1,
rel: true // same as relative: true
}
]
*/
Very closely based off of Path Data Spec. Please referance there for more specifics of what points represent. Also if the key rel
or relative
is set to true the path with encoded with a lower case instruction making the point relative to the last point.
{
"x": 0,
"y": 0
}
{
"x": 100,
"y": 50
}
{
"x": 100
}
{
"y": 150
}
{
"x1": 500,
"y1": 500,
"x2": 250,
"y2": 250,
"x": 100,
"y": 50
}
{
"x2": 250,
"y2": 250,
"x": 100,
"y": 50
}
{
"x1": 250,
"y1": 250,
"x": 100,
"y": 50
}
{
"rx": 25,
"ry": 25,
"xrotate": -30,
"largearc": 0,
"sweep": 1,
"x": 250,
"y": 250
}
{}