使用javascript从任意SVG路径中提取x，y坐标答案

【问题标题】：Extract x,y coordinates from arbitrary SVG path with javascript使用javascript从任意SVG路径中提取x，y坐标
【发布时间】：2013-11-07 09:42:42
【问题描述】：

我想用变量替换 SVG 路径中的坐标。（使用 javascript）。虽然 svg 路径可以有多种类型，但在具体示例中获得一些支持会很有帮助：

d = "M27,0C27,21,4,34,-13,23C22,18,-27,9,-27,0";

我希望将此 SVG 路径转换为

var x = [];
var x[0] = 27; x[1] = ...

d = "M + x[0] + "," + y[0] 
    + "C" 
    + x[0] + "," + y[0] + ","
    + x[1] + "," + y[1] + ","
    + x[2] + "," + y[2] + ","
    + "C" 
    + x[3] + "," + y[3] + ","
    + x[4] + "," + y[4] + ","
    + x[5] + "," + y[5];

所以我的问题是找到合适的 javascript RegExp 来提取所有变量，并使用它生成给定的 SVG 路径。

我实际上做的是创建一个代表给定 svg 的 Javascript 对象，我希望能够单独设置坐标。

非常感谢任何帮助

谢谢，马丁

更新：在接受的答案旁边，在精彩的 raphael.js 库中还有一个非常方便的方法来分析 SVG 路径

http://raphaeljs.com/reference.html#Raphael.parsePathString

【问题讨论】：

用逗号分割它并使用结果数组中的单个项目。
谢谢，问题是 23C22 以哪种方式开始让事情变得混乱。（当然这里我只有一个简单的 svg 路径示例）
Scripting <path> data in SVG (reading and modifying)的可能重复
感谢罗伯特，该链接肯定包含我正在寻找的内容。您能否将其作为答案发布，以便我批准。这使得偶然发现这个问题的人更有可能找到链接。再次感谢
raphaeljs 链接已损坏。

标签： javascript regex svg

【解决方案1】：

只需使用 SVG DOM 来解析它there are more details in this question/answer 但基本上你会这样做

var segments = path.pathSegList;

这为您提供了一组可以读取或写入的段和值，例如

segments.getItem(0).y = -10;

【讨论】：

已弃用的 SVG pathSegList stackoverflow.com/questions/34352624/…的替代方案@

【解决方案2】：

这可能是你的正则表达式：

var newd = d.match(/(^[0-9]+,)|(^,[0-9]+)$/g);
var arrayd = newd.split(",");

【讨论】：

谢谢，不幸的是，路径并不容易，因为路径可能包含“23C22”之类的讨厌的东西（新三次样条的开始）
你想从“23C22”创建什么变量，f.e.
23 是上例中的 y[2] 变量，C 代表它是 22 将是 x[3] 变量
非常感谢-罗伯特·朗森（Robert Longson）友善地给出了更完整的答案，我接受了他的回答-再次感谢
是的，但由于弃用，该答案不再有效，而且我没有继续尝试使用上述替代方法。

【解决方案3】：

我只是在学习 JavaScript，所以我无法帮助进行转换，但这个正则表达式应该会有所帮助：

\-?\d+

它从您提供的字符串中捕获所有坐标，同时避免使用字符 [a-zA-Z]。

但我可以在 Java 中提供一些或多或少代码来完成这项工作。

Pattern p = Pattern.Compile("\-?\d+");
Matcher m = p.matcher(yourPathString);
while(m.Find())
    \\add the match to your new table or something you want

【讨论】：

谢谢 - 因为我得到了我的整体问题的答案，所以我接受了这个答案并且不必自己实施 - 再次感谢
@dorjeduck 确定没问题； )
这是针对您的整体问题的答案，但不是您提出的确切问题。当您认为必须自己解析字符串时，这些回答您最初问题的尝试仍然值得信赖。它们可能对浏览此处的其他人有用。顺便说一句，您首选的解决方案已被弃用且不再有效。