CODEWITHSUNDEEP
javascriptparsingsvgpathfabricjs
zeacuss
zeacuss

Reputation: 2623

parse d attribute in SVG path element

I'm trying to parse the d attribute in SVG Path element, and so far I found that fabric.js can parse SVG, but till now I still don't know how.

I need to parse the path in order to get the shapes in it (lines arcs) and draw squares over them, and most importantly return the attributes of these squares.

any idea how to do this using fabric.js?? or any other library?? or does anyone have a different approach?

the following image has a rectangle and a line both have squares that I drew on their boundaries, and I'm trying to do the same on the path elementrectangle and line with boundaries

Upvotes: 7

Views: 4894

Answers (4)

JPCF
JPCF

Reputation: 2271

Python's svgpathtools library might be useful for your needs. This is a list of its features (from the documentation):

Some included tools:

read, write, and display SVG files containing Path (and other) SVG elements
convert Bézier path segments to numpy.poly1d (polynomial) objects
convert polynomials (in standard form) to their Bézier form
compute tangent vectors and (right-hand rule) normal vectors
compute curvature
break discontinuous paths into their continuous subpaths.
efficiently compute intersections between paths and/or segments
find a bounding box for a path or segment
reverse segment/path orientation
crop and split paths and segments
smooth paths (i.e. smooth away kinks to make paths differentiable)
transition maps from path domain to segment domain and back (T2t and t2T)
compute area enclosed by a closed path
compute arc length
compute inverse arc length
convert RGB color tuples to hexadecimal color strings and back

Upvotes: 0

Ivan Chaer
Ivan Chaer

Reputation: 7100

Based on zeacuss answer and Mark K Cowan suggestion, I'm using:

var cmdRegEx = /([MLQTCSAZVH])([^MLQTCSAZVH]*)/gi
var commands = d.match(cmdRegEx);

Upvotes: 3

zeacuss
zeacuss

Reputation: 2623

I found this 

var cmdRegEx = /[a-z][^a-z]*/ig;
var commands = d.match(cmdRegEx);

which can get each command with its parameters, but you need to trim each command from spaces

Upvotes: 6

Jorge
Jorge

Reputation: 784

Stamped into the same problem. You can use the regep /-?\d+/ig which produces just the numbers, striped from letters, white spaces. and commas.

Upvotes: 2

Related Questions