javascript - 动态更改 SVG-Path 的各个部分

Question

我正在将 RaphaelJS 用于 SVG 图形，并且我有这样的路径：

var path = canvas.path("M50,100 l0,100 c100,-100, 200,100, 300,0");

但稍后我可能想更改图表的某些部分。例如：

var path = canvas.path("M50,100 l0,100 c100,100, 200,-100, 300,0"); 

请注意 moveTo 和 lineTo 命令是相同的，只是curveTo 的两个参数发生了变化。我可以path直接更改部分，还是必须绘制一条新路径并删除旧路径？

（小提琴）

Answer 1

演示：http: //jsfiddle.net/dBqya/

function togglePath(path){
    path.attr('path', 'M50,100 l0,100 c100,100, 200,-100, 300,0');
}

var canvas = Raphael('canvas', 500, 500);

var path = canvas.path('M50,100 l0,100 c100,-100, 200,100, 300,0');
path.attr({ stroke: 'red', 'stroke-width': 3 });

document.getElementById('toggle').addEventListener('click', function () { 
  togglePath(path);
});
​