SVG圆在Edge中没有动画答案

【问题标题】：SVG Circle not animated in EdgeSVG圆在Edge中没有动画
【发布时间】：2020-07-20 19:06:00
【问题描述】：

下面的 svg 在除 Edge 之外的所有浏览器中都能完美呈现动画效果（惊喜！）。

<svg width="80" height="24" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#555">
    <circle cx="15" cy="15" r="15">
        <animate attributeName="r" from="15" to="15"
                 begin="0s" dur="0.8s"
                 values="15;9;15" calcMode="linear"
                 repeatCount="indefinite" />
        <animate attributeName="fill-opacity" from="1" to="1"
                 begin="0s" dur="0.8s"
                 values="1;.5;1" calcMode="linear"
                 repeatCount="indefinite" />
    </circle>

</svg>

我尝试将px 添加为单位，但没有成功。

感谢您的提示！

【问题讨论】：

这真的是一个惊喜，因为最新的边缘使用与 chrome 相同的渲染引擎。因此，如果它适用于 chrome，它也适用于当前的边缘版本。
@cloned，刚刚检查过：在 FF 和 Chrome 中，动画就像魅力一样，在 edge build 18362 中，svg 仍然死了
它应该可以工作 (caniuse.com/#feat=svg-smil)。确保您拥有的是新 Edge（带有波浪标志），而不是旧 Edge（带有蓝色“e”标志）。 Old Edge 不支持 SVG SMIL 动画元素。
好吧，我无法“确定”任何事情，因为那些是客户的浏览器，我无法控制它们。我自己的边缘版本是这个Microsoft Edge 44.18362.449.0
leunen.me/fakesmile/faq.html 允许 Edge 支持 SMIL，因为它没有原生支持。

标签： animation svg microsoft-edge svg-animate

【解决方案1】：

我尝试检查您的代码并参考 MDN 文档。

我可以看到您在代码中使用了 animate、attributeName、from、to、dur 属性。

Animate 在 Edge 版本

而 attributeName、from、to、dur

的兼容性未知

参考：

SVG Animate

我认为这就是您的代码无法在 MS edge 旧版浏览器中运行的原因。

我建议您建议您的客户使用 MS Edge Chromium 浏览器，或者您可以删除动画或显示图像代替动画以避免此问题。

【讨论】：

【解决方案2】：

阅读 cmets 和答案后，我决定使用清晰的 CSS 动画，而不是 SVG。我从https://projects.lukehaas.me/css-loaders/ 获取了代码，我的“解决方案”如下所示：

<style>
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.2em;
  height: 2.2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.3s infinite ease-in-out;
  animation: load7 1.3s infinite ease-in-out;
}
.loader {
  color: #888;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.2em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.2em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.2em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.2em 0 0;
  }
}
</style>

<div class="loader">Loading...</div>

【讨论】：

感谢您发布此问题的解决方案。我建议您尝试在 48 小时后标记您自己对这个问题的答案，当它可以标记时。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。