Если еще актуально - попробуйте вот так.
Работает в том числе и в IE8.
Суть этого способа в добавлении к элементам "path" нового атрибута "length" с последующей его анимацией:
window.onload = function(){
var paper = Raphael(document.getElementById("holder"), "100%", "100%");
var p1 = "M38 27c14,83 82,173 184,114 102,-60 -97,-44 -73,-82 25,-37 196,-37 259,-1 63,36 64,63 64,63",
p2 = "M23 157c0,-42 -34,-135 102,-118 136,17 -34,89 -22,128 12,39 87,51 225,-8 137,-58 51,-81 -27,-97 -77,-17 -143,28 -110,67 34,38 279,35 279,35",
line1,
line2;
// для элементов "path" добавляем новый атрибут "length", который может быть от 0 до getTotalLength
// кроме того в каждом элементе "path" в параметре data("total-length") будет указана его длина, которая может понадобиться для анимации атрибута "length"
paper.customAttributes.length = function (value) {
if (!this.data("full-path")) { this.data("full-path", this.attrs.path) };
if (!this.data("total-length")) { this.data("total-length", Raphael.getTotalLength(this.data("full-path"))) };
return {
path: Raphael.getSubpath(this.data("full-path"), 0, value)
}
};
// при загрузке страницы задаем нулевую длину для обеих линий
line1 = paper.path(p1).attr({"length": 0});
line2 = paper.path(p2).attr({"length": 0});
document.getElementById("draw").onclick = function(){
line1.animate({
"length": line1.data("total-length"),
"stroke": "red",
"stroke-width": 10
}, 1000);
line2.animate({
"length": line2.data("total-length"),
"stroke": "green",
"stroke-width": 5
}, 2000);
};
};
архив прикрепляю, посмотреть в работе можно тут:
http://jsfiddle.net/yncwpry1/1/