The position of the path with raphael

Question

How to change the position of a path using raphael js?

It is very strange that the obvious way does not work:

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

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

Answer 1

Using

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

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

Answer 2

I did this using something like this:

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

Answer 3

Raphael 2.0+, , translate ('t'), :

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

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

. , ...

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

... 100px, 50px, 50px . ( , - "T" "t", )

---

, , , , , , , , .

, . :

1: someElement.data() *:

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

2: someElement.transform(), , *:

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;
  }
};

* , 't' 'T'

, ...

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

Do not try to use getBBox()this (the standard way to get the position of a Raphael element for any type of element). getBBox()will include any movement without translation, for example, movement M in determining the path.

Answer 4

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