在IE / Edge中

时间:2018-09-01 02:30:34

标签: javascript animation svg css-animations svg.js

我使用svg.js制作了以下svg动画。最初,我使用CSS为dashoff设置动画,但是它在IE / Edge中不起作用,因此我改用JS。还是行不通。奇怪的是,如果我的笔划宽度很细,那么它就可以奏效。

const percent_complete = 75;
const progress = SVG.adopt(document.getElementById("progress-svg"));
const timer = 2500;

progress.each(function() {
  this.attr({
    stroke: "#cccccc",
    "stroke-width": "6px"
  });
  if (this.hasClass("meter")) {
    let len = this.length();
    this.stroke({
      dasharray: len + "px",
      dashoffset: len + "px"
    });

    let to = len * ((100 - percent_complete) / 100);
    this.stroke("#60cafe");

    // if MS browser, just set attr
    // if (browser.name === "edge" || browser.name === "ie") {
    //   this.attr({ "stroke-dashoffset": to + "px" });
    // }

    // animate svg
    this.animate(timer).attr({
      "stroke-dashoffset": to + "px"
   });
  }
});

fiddle

0 个答案:

没有答案