为什么这个 SVG 动画不能跨浏览器工作？答案

【问题标题】：Why isn't this SVG animation working cross-browser?为什么这个 SVG 动画不能跨浏览器工作？
【发布时间】：2016-06-01 12:51:21
【问题描述】：

我有一个由 www.loading.io 为我生成的 SVG 图像，该动画仅适用于 Google Chrome (v. 48)。我尝试在 Internet Explorer 11、Firefox (v. 44) 和 Edge (v. 25) 中打开该文件，它们只渲染初始图像而没有任何动画。 Example。您也可以通过下载 SVG here 来观察自己的行为。

这是 SVG 标记：

<?xml version="1.0" encoding="utf-8"?>
<svg width='50px' height='50px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
     class="uil-ring">
    <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
    <circle cx="50" cy="50" r="46" stroke-dasharray="145.95839468578177 143.06812944447918" stroke="#285e8c" fill="none"
            stroke-width="8">
        <animateTransform attributeName="transform" type="rotate" values="0 50 50;180 50 50;360 50 50;"
                          keyTimes="0;0.5;1" dur=".75s" repeatCount="indefinite" begin="0s"></animateTransform>
    </circle>
</svg>

有谁知道我怎样才能让这个漂亮的小 SVG 在所有现代浏览器上制作动画？

【问题讨论】：

标签： google-chrome animation svg cross-browser microsoft-edge

【解决方案1】：

SMIL 规范说durations cannot start with a . character - 需要前导零，这就是 Firefox 实现的。我已经更正了下面的内容，因此它可以在 Firefox 中使用。

IE 不支持 SMIL，尽管可以使用 fakeSmile library 来解决这个问题。

<?xml version="1.0" encoding="utf-8"?>
<svg width='50px' height='50px' viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
     class="uil-ring">
    <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
    <circle cx="50" cy="50" r="46" stroke-dasharray="145.95839468578177 143.06812944447918" stroke="#285e8c" fill="none"
            stroke-width="8">
        <animateTransform attributeName="transform" type="rotate" values="0 50 50;180 50 50;360 50 50;"
                          keyTimes="0;0.5;1" dur="0.75s" repeatCount="indefinite" begin="0s"></animateTransform>
    </circle>
</svg>

【讨论】：