Question

我想用javascript：

为svg路径设置动画

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

Demo here

path.style.transition并不适用于IE

1 个答案: