在SVG路径元素中解析d属性

Question

我正在尝试解析SVG Path元素中的d属性，到目前为止我发现fabric.js可以解析SVG，但到目前为止我仍然不知道如何。

我需要解析路径以获取其中的形状（线弧）并在其上绘制方块，最重要的是返回这些方块的属性。

任何想法如何使用fabric.js？或任何其他图书馆？或者有没有人有不同的方法？

下面的图像有一个矩形，一条线都有我画在边界上的正方形，我试图在路径元素上做同样的事情

Answer 1

我发现了这个

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

可以使用其参数获取每个命令，但是您需要从空格中修剪每个命令

Answer 2

加入同样的问题。您可以使用regep / - ？\ d + / ig，它只生成数字，从字母，白色空格条纹。和逗号。

Answer 3

根据zeacuss的回答和Mark K Cowan的建议，我正在使用：

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

Answer 4

Python的svgpathtools库可能对您的需求有用。这是其功能列表（来自documentation）：

  

一些包含的工具：

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