Question

我有一个由www.loading.io为我生成的SVG图像，动画仅适用于谷歌浏览器（第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在所有现代浏览器上制作动画？

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动画不能跨浏览器工作？

1 个答案: