CODEWITHSUNDEEP
javascripthtmlsvgraphael
nuala
nuala

Reputation: 2688

Changing parts of SVG-Path on the fly

I'm using RaphaelJS for SVG graphics and I've a path like this:

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

But later I might want to change some parts of the graph. E.g:

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

Notice the moveTo and lineTo commands are the same solely two arguments for curveTo have changed. Can I change parts of path directly or do I have to draw a new path and delete the old one?

(Fiddle)

Upvotes: 0

Views: 635

Answers (1)

Danil Speransky
Danil Speransky

Reputation: 30453

Demo: 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);
});
​

Upvotes: 3

Related Questions