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

Question

我有一个由 www.loading.io 为我生成的 SVG 图像，动画仅适用于 Google Chrome (v. 48)。我尝试在 Internet Explorer 11、Firefox（v.44）和 Edge（v.25）中打开文件，它们只渲染初始图像而没有任何动画。 Example. You can observe the behavior for yourself as well by downloading the 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 在所有现代浏览器上都具有动画效果？

Answer 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>

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

Why isn't this SVG animation working cross-browser?

animation

svg

google-chrome

cross-browser

microsoft-edge