SVG路径动画文本不会在IE11中呈现[重复]

Question

女士们，先生们。

(function() {
  var charParts, i, j, len, part, partElem, resize;

  charParts = ["d-1", "d-2", "e-1", "e-2", "s-1", "i-1", "i-2", "g-1", "g-2", "n-1", "n-2"];

  partElem = $("path");

  for (j = 0, len = charParts.length; j < len; j++) {
    part = charParts[j];
    $("svg").append(partElem.clone().attr("class", part));
  }

  i = setInterval(function() {
    return $("div").toggleClass("text");
  }, 7000);

  setTimeout(function() {
    return $("div").toggleClass("text");
  }, 100);

  $("div").click(function() {
    clearInterval(i);
    return $("div").toggleClass("text");
  });

  resize = function() {
    return $("body").css({
      "margin-top": ~~((window.innerHeight - 400) / 2) + "px"
    });
  };

  $(window).resize(resize);

  resize();

  //get the line lengths
//$("path").each (i) -> console.log @getTotalLength()

}).call(this);

body,
html,
div {
  background: #5677fc;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
svg {
  width: 600px;
  height: 400px;
  cursor: pointer;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
path {
  fill: none;
  -webkit-transition: stroke-dashoffset 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), stroke-dasharray 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -moz-transition: stroke-dashoffset 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), stroke-dasharray 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -o-transition: stroke-dashoffset 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), stroke-dasharray 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  -ms-transition: stroke-dashoffset 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), stroke-dasharray 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition: stroke-dashoffset 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95), stroke-dasharray 5.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke: #f5f6f7;
  stroke-dashoffset: 0px;
  stroke-dasharray: 0px 1180px;
}
.text path.d-1 {
  stroke-dashoffset: -149px;
  stroke-dasharray: 22px 1180px;
}
.text path.d-2 {
  stroke-dashoffset: -201.3px;
  stroke-dasharray: 49px 1180px;
}
.text path.e-1 {
  stroke-dashoffset: -377.5px;
  stroke-dasharray: 14px 1180px;
}
.text path.e-2 {
  stroke-dashoffset: -431.2px;
  stroke-dasharray: 43px 1180px;
}
.text path.s-1 {
  stroke-dashoffset: -526px;
  stroke-dasharray: 37px 1180px;
}
.text path.i-1 {
  stroke-dashoffset: -631px;
  stroke-dasharray: 0.1px 1180px;
}
.text path.i-2 {
  stroke-dashoffset: -637.5px;
  stroke-dasharray: 16px 1180px;
}
.text path.g-1 {
  stroke-dashoffset: -732.5px;
  stroke-dasharray: 15px 1180px;
}
.text path.g-2 {
  stroke-dashoffset: -812px;
  stroke-dasharray: 69px 1180px;
}
.text path.n-1 {
  stroke-dashoffset: -941px;
  stroke-dasharray: 17px 1180px;
}
.text path.n-2 {
  stroke-dashoffset: -1013px;
  stroke-dasharray: 33.5px 1180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <svg viewBox="0 0 300 200">
    <path class="motion" d="
      M  0,  0
      C  0,  0  99,  1  99, 89
      L 99,111
      C 99,130  75,112  99,112
      C103,112 100,112 106,112
      C121,112 121, 89 105, 89
      C 88, 89 102, 89  99, 89
      C  0, 89  80,103 123,103
      C128,103 135,103 136,103
      C155,103 137,140 137,103
      C137, 92 123, 93 123,103
      C123,115 135,113 137,110
      C152, 86 103, 87 143,110
      C152,116 157,106 147,103
      C140,102 143, 93 152, 96
      C206,118 159.5,50 159,89
      L159,112
      C159,180 117, 93 168,118
      C176,122 180,116 180,115
      C183,107 169,101 168, 90
      C167, 77 180, 67 180, 95
      L180,103
      C180,115 166,115 166,103
      C166, 92 180, 94 180,102
      C180,180 188,125 188,112
      C188,110 188,100 188, 96
      C188, 91 189, 80 194, 91
      C200,101 186,134 188,106
      C189, 93 201, 93 201,100
      C201,105 201,105 201,112
      C201,130 220,160 300, 80
    "></path>
  </svg>
</div>

我最近发现了漂亮的 SVG 动画。 它在除 IE 11 之外的所有主要浏览器中都能完美运行，这就是问题所在。 我检查了两次 CSS 和 HTML 支持表，一切似乎都很好。 IE11 是否没有为 stroke-dasharray 和 stroke-dashoffset 设置动画？是否有针对此的 polyfill？ 任何帮助将不胜感激。

Answer 1

遗憾的是，IE 不支持 SVG + CSS 动画，而 Microsoft Edge 支持。另外，IE 和 Edge 都不支持 SVG + SMIL 动画。

一种可能的解决方案是使用带有FakeSmile library 的SVG + SMIL，或者您可以使用Loading.io's SMILTool Library 之类的库将其转换为PNG 序列/GIF，它还支持带有SVG + CSS 动画的动画。

由于 SVG 提供比 GIF 更好的质量，您可以考虑以两种格式（SVG 和 GIF）提供动画，具体取决于客户端的浏览器。这可以通过配置您的网络服务器轻松完成。