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

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

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

任何想法如何做到这一点使用fabric.js ??或任何其他库？还是有人有不同的方法？

下面的图片有一个矩形和线都有，我对他们的边界画了广场，我试图做同样的路径元素 rectangle and line with boundaries

2012-02-23 zeacuss

上，我发现这个

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

它可以得到每个命令与它的参数，但你需要从空间修剪每个命令

来源

2012-02-27 20:05:23 zeacuss

尼斯...可能会失败，以标准的形式符号（1E + 0）的数字，但我不确定这些在SVG中是否有效 – 2015-03-06 13:50:33

我很想用这个正则表达式代替：'（/ [MLQTCSAZ] [^ MLQTCSAZ] */gi'（注意：未经测试） – 2015-03-06 13:53:17

Mark的反对是正确的。这些在SVG规范中声明为有效，因此这种解析不应包含e .XBNF具体为： command.floating-point-constant：分数常数指数？ |数字序列指数分数常数：数字序列？ “”数字序列 |数字序列“。” 指数：（“e”|“E”）符号？数字序列 – Tatarize 2016-06-15 17:54:23

盖印到相同的问题。你可以使用regep/- ？\ d +/ig，它只产生数字，从字母，空白条纹。和逗号。

来源

2012-03-25 01:02:16 Jorge

也删除了小数点！ '/ - ？\ d +（。\ \ d +）/ ig' – pete 2012-05-23 00:04:16

基于zeacuss答案和前标记考恩建议，我使用的是：

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

来源

2016-12-09 16:52:28

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

来源

2017-02-23 13:22:08 JPCF

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

回答

相关问题