How to know new path after animation? - raphael

Question

I would like to know if it is possible to retrieve the new path after animation, I tried :
var p =
canevas.path("M0,0,100,20").animate({transform:"t100,100"},500,"none",function
() {alert(this.attr("path"));})
but alert alerts me the original path without taking into account the transformation .
Is there a way to do this ?
Thank you
V.Bonnet

Answer 1

You can use the Raphael.transformPath method to get the path with the transformation 'baked in'. To use your example:
var paper = Raphael(10, 10, 300, 300);
var line = paper.path("M0,0,100,20");
line.animate({ transform: "t100,100" }, 500, "none", function() {
var transform = this.attr('transform');
var transformedPath = Raphael.transformPath(this.attr('path'), transform);
console.log("original path:", this.attr('path').toString());
console.log("transform:", transform.toString());
console.log("new path:", transformedPath.toString());
})​
This will yield:
original path: M0,0L100,20
transform: t100,100
new path: M100,100C100,100,200,120,200,120
See it in action here: http://jsfiddle.net/seeligd/HCUey/3/

Answer 2

When translating in Raphael 2.x it doesn't modify the path, it adds a transformation such as...
<path fill="none" stroke="#000000" d="M0,0L100,20" transform="matrix(1,0,0,1,100,100)"></path>
I recall that Raphael 1.x used to modify the path, but this is no longer true. To find out how the element was transformed you can try...
var p = canevas.path("M0,0,100,20").animate({transform:"t100,100"},500,"none",function () {alert(this.attr("transform"));})
and it will return t100t100 which you have to parse manually.