Skip to content

Instantly share code, notes, and snippets.

@eeropic
Created June 4, 2019 19:29
Show Gist options
  • Select an option

  • Save eeropic/795d0aa1f0bc73779f434e5d4d8ddb63 to your computer and use it in GitHub Desktop.

Select an option

Save eeropic/795d0aa1f0bc73779f434e5d4d8ddb63 to your computer and use it in GitHub Desktop.
//https://github.com/jkroso/parse-svg-path
var cmdLength = {a:7, c:6, h:1, l:2, m:2, q:4, s:4, t:2, v:1, z:0}
var segPattern = /([astvzqmhlc])([^astvzqmhlc]*)/ig
var numPattern = /-?[0-9]*\.?[0-9]+(?:e[-+]?\d+)?/ig
function parseVals(args) {
var nums = args.match(numPattern)
return nums ? nums.map(Number) : []
}
function svgPathToArray(path) {
var data = []
path.replace(segPattern, function(_, cmd, args){
var type = cmd.toLowerCase()
args = parseVals(args)
if (type == 'm' && args.length > 2) {
data.push([cmd].concat(args.splice(0, 2)))
type = 'l'
cmd = cmd == 'm' ? 'l' : 'L'
}
while (true) {
if (args.length == cmdLength[type]) {
args.unshift(cmd)
return data.push(args)
}
if (args.length < cmdLength[type]) throw new Error('malformed path data')
data.push([cmd].concat(args.splice(0, cmdLength[type])))
}
})
return data
}
/*
MoveTo: M, m
LineTo: L, l, H, h, V, v
Cubic Bézier Curve: C, c, S, s
Quadratic Bézier Curve: Q, q, T, t
Elliptical Arc Curve: A, a
ClosePath: Z, z
*/
function pathArrayToObjects(arr){
pathCommands={
"M"(){
return "MoveTo"
},
"m"(){
return "moveto"
},
"L"(){
return "LineTo"
},
"l"(){
return "lineto"
},
"H"(){
return "Horiz LineTo"
},
"h"(){
return "horiz lineto"
},
"V"(){
return "Vert LineTo"
},
"v"(){
return "vert lineto"
},
"C"(){
return "Cubic Bezier"
},
"c"(){
return "cubic bezier"
},
"S"(){
return "Smooth Cubic Bezier"
},
"s"(){
return "smooth cubic bezier"
},
"Q"(){
return "Quad bezier"
},
"q"(){
return "quad bezier"
},
"T"(){
return "Smooth Quad Bezier"
},
"t"(){
return "smooth quad bezier"
},
"A"(){
return "Elliptical Arc"
},
"a"(){
return "elliptical arc"
},
"Z"(){
return "Close path"
},
"z"(){
return "close path"
}
}
return arr.map(function(item){
return pathCommands[item[0]]()
})
}
pathStr=`M44.5,65.5c38,0,1-65,30-65s46,57,60,57s-81,56-50,56s-74-2-74-2l-10-45l20-46l99,86`
var pathArray=svgPathToArray(pathStr)
console.log(pathArrayToObjects(pathArray))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment