10

我想用变量替换 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

4

3 回答 3

12

只需使用 SVG DOM 来解析它，这个问题/答案中有更多细节，但基本上你可以

var segments = path.pathSegList;

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

segments.getItem(0).y = -10;
于 2013-11-07T11:18:12.930 回答
2

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

var newd = d.match(/(^[0-9]+,)|(^,[0-9]+)$/g);
var arrayd = newd.split(",");
于 2013-11-07T09:47:47.310 回答
0

我只是在学习 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
于 2013-11-07T09:54:46.090 回答