关于javascript：动态更改SVG-Path的部分内容


Changing parts of SVG-Path on the fly

我正在使用RaphaelJS来制作SVG图形，我有一条这样的路径：

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

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

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

注意moveto和lineto命令是相同的，只有curveto的两个参数发生了变化。我可以直接更改EDOCX1的部分内容吗？还是必须绘制新路径并删除旧路径？

(小提琴)

演示：http：/ / / / dbqya jsfiddle.net

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
});
?
相关讨论