我想用变量替换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对象,我希望能够单独设置坐标。
任何帮助高度赞赏
thx,martin
更新: 在接受的答案旁边,在精彩的raphael.js库中还有一个非常方便的方法来分析SVG路径
答案 0 :(得分:11)
只需使用SVG DOM解析它there are more details in this question/answer,但基本上就是
var segments = path.pathSegList;
,它为您提供了一系列可以读取或写入的段和值,例如
segments.getItem(0).y = -10;
答案 1 :(得分:2)
这可能是你的正则表达式:
var newd = d.match(/(^[0-9]+,)|(^,[0-9]+)$/g);
var arrayd = newd.split(",");
答案 2 :(得分: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