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

Question

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

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

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

Answer 1

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

var segments = path.pathSegList;

并且它为您提供了一系列可以读取或写入的段和值,例如

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