raphael的路径位置

Question

我如何更改raphael js的路径位置？

很奇怪，不工作明显的方式：

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

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

Answer 1

使用

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

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

Answer 2

translate是绝对的，如果你需要相对postioning，您可以使用p.attr`改变“M “参数

Answer 3

我使用类似这样的东西来完成它：

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

Answer 4

要圣拉斐尔2.0+移动的路径中，设置或使用翻译（“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); 
}); 

...将下降100像素的权利，那么，它就会涨回去离开50像素，50像素结束，从那里开始向下和向右。如果您想根据相对的，不是它移动

---

- （使用“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); 
}); 

不要试图对此使用getBBox()（对于任何类型的元素，standard way to get Raphael element positions）。 getBBox()将包括任何非平移运动，例如路径定义中的M移动。