SVG 和 CSS3 动画在 IE 和 Safari 中不起作用答案

【问题标题】：SVG and CSS3 Animations not working in IE and SafariSVG 和 CSS3 动画在 IE 和 Safari 中不起作用
【发布时间】：2016-02-23 12:18:36
【问题描述】：

我有这段代码用于使用 HTML5、CSS3 动画和 SVG 制作动画 line。它只能在 Chrome、Opera 和 Firefox 中运行，并且无法运行在 IE 和 Safari 中。有什么解决办法吗？

代码如下：

.line {
  width: 65%;
  margin: 0 auto;
}
#svg path.path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 4000;
  stroke-width: 2;
  -webkit-animation: lines 5s linear forwards;
  -moz-animation: lines 5s linear forwards;
  -ms-animation: lines 5s linear forwards;
  -0-animation: lines 5s linear forwards;
  animation: lines 5s linear forwards;
}
@keyframes lines {
  form {
    stroke-dashoffset: 4000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes lines {
  form {
    stroke-dashoffset: 4000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes lines {
  form {
    stroke-dashoffset: 4000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-ms-keyframes lines {
  form {
    stroke-dashoffset: 4000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-o-keyframes lines {
  form {
    stroke-dashoffset: 4000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<div class="line">
  <svg id="svg" stroke="#000" stroke-miterlimit="1000" id="Layer_1" style="opacity:1;" x="0px" y="0px" viewBox="0 0 960 560" enable-background="new 0 0 960 560" xml:space="preserve">
    <path class="path" fill="#fff" stroke="#000" stroke-miterlimit="1000" stroke-dasharray="11.9901,11.9901" d="M52.652,248.08
      c30.97,37.245,74.957,63.396,122.172,75.244c53.056,13.313,109.816,9.162,161.756-7.968
      c42.308-13.953,83.007-37.533,108.174-74.156c4.655-6.774,8.818-14.153,10.027-22.271c2.24-15.044-6.187-29.969-17.51-40.177
      c-28.483-25.679-73.116-26.422-108.534-11.588c-54.196,22.698-92.323,81.422-86.252,139.649
      c6.07,58.228,59.091,109.265,117.886,109.022c20.716-0.085,41.065-5.884,60.092-14.042c18.307-7.85,35.789-18.023,50.322-31.606
      c14.503-13.555,25.718-30.139,37.837-45.845c17.476-22.649,37.883-44.311,64.254-55.552c26.37-11.241,59.879-9.795,80.612,9.943
      c30.67,29.196,23.317,84.899,56.145,111.668c29.1,23.729,74.437,10.683,102.618-14.121c32.31-28.438,51.374-68.875,65.118-109.573
      c12.464-36.907,21.327-75.103,35.836-111.202" />
  </svg>
</div>

See the code in "Code Pen"

我想通过让它在 IE 和 Safari 中运行来修复它。如果可能，请 仅在 HTML5、CSS 和 SVG 中。

【问题讨论】：

@aliasm2k 你为什么要把 HTML5-canvas 拿出来？请分享您的意见？
我也把标签拿出来了。没有真正提到 HTML5 Canvas，您没有使用 Canvas API 共享 JS 代码，声明“仅 HTML5”不会自动指向 Canvas。如果您希望您的解决方案出现在 Canvas 中，请在问题本身中明确说明，并提供您自己尝试过的 JS 代码。
感谢您编辑我的标签，是的，您说得对，但是如果我的代码中没有解决方案怎么办，这就是为什么我说如果可能的话？（它可以在 HTML5 Canvas 中）
你能告诉我你的目标是哪个版本的IE吗？
@Zigma Empire Edge，10 和 9，但它们都不起作用，现在我至少想要 Edge

标签： javascript html css svg css-animations

【解决方案1】：

Mozilla Devloper Network - SVG Animation - Browser Compatibility 说

Internet Explorer
不支持

然后使用 FakeSMIL

参考这个FakeSmile with IE9

参考这个http://jsfiddle.net/whyoz/c3wb5sbr/

function registerAnimation(anim) {
    var targets = getTargets(anim);
    var elAnimators = new Array();
    for(var i=0; i<targets.length ;i++) {
      var target = targets[i];
      var animator = new Animator(anim, target, i);
      animators.push(animator);
      elAnimators[i] = animator;
    }
    anim.animators = elAnimators;
    var id = anim.getAttribute("id");
    if (id)
      id2anim[id] = anim;
    for(var i=0; i<elAnimators.length ;i++)
      elAnimators[i].register();
}

var svg   = document.getElementsByTagName('svg')[0];
.......
var animation = document.createElementNS(
    "http://www.w3.org/2000/svg", "animate");
.......
.......
registerAnimation(animation);
animation.beginElement();

哪个可以在IE中为SVG带来动画

参考 MSDN https://msdn.microsoft.com/en-us/library/gg193979(v=vs.85).aspx

示例 http://samples.msdn.microsoft.com/workshop/samples/svg/svgAnimation/basic/06seventeenGearsWith1Button.html

【讨论】：