在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庫可能對您的需求有用。 這是其功能列表（來自文檔 ）：

一些包括工具：

 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