path.style.transition не работает на IE

Question

Я хочу анимировать путь SVG с помощью 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 ));
});

Работает на всех браузерах, но не IE10 и менее. Попробуйте это: http://jsfiddle.net/HvRBx/4/

У вас есть решение для IE без необходимости переделывать все?

Answer 1

Вы всегда можете сделать это с помощью простого тайм-аута Javascript. Я думаю, что следующее должно работать с более ранними версиями IE (не могу проверить себя прямо сейчас).

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

Демо здесь