path position with raphael

Question

how can i change path position with raphael js?

it very strange that obvious way not working:

var p = paper.path("some path string");

p.attr("fill","red");
p.attr({x:200,y:100});  //not working

Answer 1

Use

var p = paper.path("M10 10L90 90L10 90");

p.attr("fill","red");
p.translate(300, 100);

Answer 2

I got it done using something like this:

p.attr({path:"M10 10L90 90L10 90"});

Answer 3

To move a path in Raphael 2.0+, set or animate the transform attribute using translate ('t'), like this:

// animate
someElement.animate({transform: ['t',100,100]}, 1000);

// set
someElement.attr({transform: ['t',100,100]});

This overwrites any existing translation. So, this...

someElement.animate({transform: ['t',100,100]}, 1000, function(){
  someElement.animate({transform: ['t',50,50]}, 1000);
});

... will move down right 100px, then, it'll go back up left 50px, ending 50px down and right from where it started. (if it's been rotated, it'll take that rotation into account - use 'T' instead of 't' to ignore past rotation)

---

If you want it to move based on relative, not absolute, co-ordinates, based on where it is now not where it was when it was first translated, you need to get the previous translation co-ordinates and apply them.

This is harder than you might expect. There are two ways that I know of:

1: Store the transform data in someElement.data()*:

someElement.data('t',[100,100]);
// stuff happens...
var translate = someElement.data('t');

2: Get the transform data using someElement.transform() then parse the hell out of it, for example*:

var transform = someElement.data();
for (var i = transform.length - 1; i >= 0; i--) {
  if(transform[i][0].toLowerCase() == 't') {
    var translate = [ transform[i][1], transform[i][2] ];
    break;
  }
};

*Adjust if you need to distinguish 't' from 'T'

Then, to animate a movement and keep going...

someElement.animate({transform: ['t',100,100]}, 1000, function(){
  someElement.animate({transform: ['t',50+translate[0],50+translate[1] ]}, 1000);
});

Don't be tempted to use getBBox() for this (the standard way to get Raphael element positions for any type of element). getBBox() will include any non-translate movement, like the M move in the path definition.

Answer 4

translate is absolute, if you need relative postioning, you can use p.attr` to change the "M" parameter