使用SVG和JavaScript创建微调器

我正在尝试使用SVG和javascript创建一个微调器。问题是它不能准确地工作。它具有启动和停止功能。单击“开始”时，它会在设置动画之前延迟，当我停止时，它会很好地停止，但如果我再次单击“开始”，它将无法启动

目前，它在IE9和IE11中不起作用。如果有我不知道的黑客

您将如何使用动画制作此动画

---

})

很遗憾，我没有一个完整的代码答案给你。然而，我可以告诉你为什么你有一些问题

首先，延迟的原因是您说的是

setInterval（function（）{…}，2700）

这意味着它将在2.7秒内调用该函数，并在此后每隔2.7秒继续调用该函数。在

setInterval（）之前尝试添加这段代码

这将立即调用转换函数一次。然后setInterval将在2.7秒后调用它

我认为，不重新启动问题的原因是您正在创建多个间隔，并且只清除其中一个间隔。由于某些原因，
var interval
无法从
stop（）
函数访问，可能是由于某些范围问题。因此，为了解决这个问题，您需要重新构造一些代码

编辑

查看此plunker:。
希望它能做你想让它做的事。代码：

var spinner = function() {
  this.transition = function() {
    var path = document.querySelector('#spinner-wrapper .spinner #main-path');
    path.style.transition = path.style.WebkitTransition = 'none';
    path.style.strokeDasharray = '205.951';
    path.style.strokeDashoffset = 430;
    path.getBoundingClientRect();
    path.style.strokeDashoffset = '0';
    path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 3s linear';
};

  this.startInterval = function(immediate,time) {
    if(immediate){
      setTimeout(transition,0);
    }
    this.interval = setInterval(function() {
      transition();
    }, time);
    return this.interval;
  };

  this.start = function() {
    clearInterval(this.interval);
    startInterval(true,2700);
  };

  this.stop = function() {
    clearInterval(this.interval);
    startInterval(false,0);
  };

  return this;
};

我可能会建议一个更简单的方法。。。使用CSS旋转静态图像。（当然，如果你需要改变图像本身的某些方面，这是行不通的。）它在IE11中不起作用。有什么线索可以让它在IE11中工作吗？@user730009你能描述一下你的意思吗？它在开发者工具控制台中是否显示任何错误？嗯，它不显示动画。单击开始按钮不起任何作用。我没有看到任何错误消息。[这是另一个版本。但在IE11中仍然不起作用。@user730009我不确定为什么它在IE11中不起作用。至于使用RaphaelJS，我建议创建一个新问题。
setTimeout(transition,0);

var spinner = function() {
  this.transition = function() {
    var path = document.querySelector('#spinner-wrapper .spinner #main-path');
    path.style.transition = path.style.WebkitTransition = 'none';
    path.style.strokeDasharray = '205.951';
    path.style.strokeDashoffset = 430;
    path.getBoundingClientRect();
    path.style.strokeDashoffset = '0';
    path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 3s linear';
};

  this.startInterval = function(immediate,time) {
    if(immediate){
      setTimeout(transition,0);
    }
    this.interval = setInterval(function() {
      transition();
    }, time);
    return this.interval;
  };

  this.start = function() {
    clearInterval(this.interval);
    startInterval(true,2700);
  };

  this.stop = function() {
    clearInterval(this.interval);
    startInterval(false,0);
  };

  return this;
};