path.style.transition doesn't working on IE

Question

I want to animate a svg path with javascript :

function PathDrawing(path,font) {
  var length = path.getTotalLength();
  path.style.transition = path.style.WebkitTransition =
  'none';
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;
  path.getBoundingClientRect();
  path.style.transition = path.style.WebkitTransition =
  'stroke-dashoffset 3s ease-in-out';
  path.style.strokeDashoffset = '0';
  path.style.strokeWidth = '30px';
path.style.fill = "transparent";
}

$.each($('path.sq-animated'), function(i, el){
if (i!=0) {
  transition=2000;
    }
    else {transition=0;}
    setTimeout(function(){
       PathDrawing(el,"rgb(170, 155, 128)");
    }, ( i * transition ));
});

Works on all browser but not IE10 and less. Try it : http://jsfiddle.net/HvRBx/4/

Have you solution for IE without having to redo everything ?

Answer 1

You could always do it with a simpe Javascript timeout loop. I think thie following should work with earlier versions of IE (can't test myself right now).

function PathDrawing(path) {
  var length = path.getTotalLength();
  path.style.strokeDasharray = length + ' ' + length;
  path.style.strokeDashoffset = length;
  path.style.strokeWidth = '30px';
  path.style.fill = "transparent";

  var  animTime = 3000; // 3s
  var  stepTime = 20;   // 20mS
  var  stepLength = length * stepTime / animTime;
  var  animFn = function(length) {
     length -= stepLength;
     if (length < 0) {
        path.style.strokeDashoffset = 0;
     } else {
        path.style.strokeDashoffset = length;
        setTimeout(animFn, stepTime, length);
     }
  }
  setTimeout(animFn, stepTime, length);
}

$.each($('path.sq-animated'), function(i, el){
    setTimeout(function(){
       PathDrawing(el);
    }, ( i * 2000 ));
});

Demo here