当前位置：文江博客话题详情

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

发布于 2025-01-08 12:57:30 字数 297 浏览 1 评论 0原文

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

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

知道如何使用 Fabric.js 做到这一点吗？或任何其他图书馆？或者有人有不同的方法吗？

下图有一个矩形和一条线，它们都有我在其边界上绘制的正方形，并且我尝试在路径元素上执行相同的操作矩形和带边界线

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

叫思念不要吵 2025-01-15 12:57:31

我发现它

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

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

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

回复收藏 0 原文

萧瑟寒风 2025-01-15 12:57:31

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

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

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

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

回复收藏 0 原文

七七 2025-01-15 12:57:31

陷入同样的问题。您可以使用 regep /-?\d+/ig 来生成数字，去掉字母和空格。和逗号。

回复收藏 0 原文

深海夜未眠 2025-01-15 12:57:31

Python 的 svgpathtools 库可能会满足您的需求。这是其功能列表（来自文档）：

一些包含的工具：

读取、写入和显示包含 Path（和其他）SVG 元素的 SVG 文件
将贝塞尔路径段转换为 numpy.poly1d（多项式）对象
将多项式（标准形式）转换为其贝塞尔形式
计算切向量和（右手法则）法向量
计算曲率
将不连续的路径分解为连续的子路径。
有效计算路径和/或线段之间的交集
找到路径或线段的边界框
反向段/路径方向
裁剪和分割路径和线段
平滑路径（即平滑扭结以使路径可微分）
从路径域到段域以及返回的转换映射（T2t 和 t2T）
计算由闭合路径包围的区域
计算弧长
计算反弧长
将 RGB 颜色元组转换为十六进制颜色字符串并返回

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

回复收藏 0 原文

~没有更多了~