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

Question

我想用 JavaScript 将 SVG 路径中的坐标替换为变量。尽管 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

- dorjeduck

---

只需按逗号分隔并使用结果数组中的各个项目即可。 - anubhava

谢谢，问题是23C22，这使得事情开始变得混乱。（当然，在这里我只有一个简单的SVG路径示例） - dorjeduck

可能是Scripting <path> data in SVG (reading and modifying)的重复问题。 - Robert Longson

谢谢Robert，那个链接肯定包含了我要找的内容。你能否把它作为答案发布，这样我就可以批准它了。这样更有可能让那些偶然遇到这个问题的人找到这个链接。再次感谢。 - dorjeduck

raphaeljs的链接已经失效。 - kiwicomb123

Answer 1

只需使用SVG DOM来解析它，此问题/答案中有更多细节，但基本上您要这样做

var segments = path.pathSegList;

这将提供给您一个分段和值的数组，您可以读取或写入这些值，例如：

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

- Robert Longson

---

弃用的SVG pathSegList的替代方案 https://dev59.com/1lsX5IYBdhLWcg3wALba - Alexei Zababurin

Answer 2

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

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

- Manolo

---

抱歉，不幸的是并不那么容易，因为路径可能包含像“23C22”这样令人讨厌的东西（即新三次样条的起点）。 - dorjeduck

你想从“23C22”创建哪些变量，例如？ - Manolo

在上面的例子中，23 是 y[2] 变量，C 保持不变，22 将是 x[3] 变量。 - dorjeduck

非常感谢 - 由于Robert Longson提供了更完整的答案，我接受了他的答案 - 再次感谢。 - dorjeduck

是的，但由于已被弃用，那个答案不再适用了，而我本人也不想尝试使用提到的替代方法。 - Thomas Poole

Answer 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

- Tafari

---

谢谢 - 我得到了我的整体问题的答案，我接受了那个答案，不必自己实现 - 再次感谢 - dorjeduck

那是针对你整体问题的答案，但不是你所问的确切问题的答案。当你认为你必须自己解析字符串时，这些尝试回答你最初的问题仍然值得赞赏。它们可能对其他浏览此处的人有用。顺便说一下，你首选的解决方案已被弃用，不再起作用。 - Thomas Poole