Parse d attribute in SVG path element

Question

I am trying to parse the d attribute in an SVG Path element, and so far I have found that fabric.js can parse SVG, but so far I still don't know how to do this.

I need to analyze the path in order to get figures (arcs of lines) in it and draw squares above 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 the line has squares that I painted on their borders, and I'm trying to do the same on a path element

Answer 1

I found this

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

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

Answer 2

Sealed in the same problem. You can use regep / -? \ D + / ig, which produces only numbers striped from letters, spaces. and commas.

Answer 3

Based on the answer to zeacuss and Mark K Cowan's suggestion, I use:

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

Answer 4

Python svgpathtools library may be useful for your needs. This is a list of its functions (from the documentation ):

Some tools included:

 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 (ie 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