SVG SMIL 动画在 Firefox 和 Edge 中不起作用答案

【问题标题】：SVG SMIL animation not working in Firefox and EdgeSVG SMIL 动画在 Firefox 和 Edge 中不起作用
【发布时间】：2020-05-06 14:50:25
【问题描述】：

我在 HTML 文档中使用以下 SVG 作为微调器：

 <svg width="32" height="32" viewBox="0 0 32 32">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 4.5C16.5 5.32842 15.8284 6 15 6C14.1716 6 13.5 5.32842 13.5 4.5C13.5 3.67158 14.1716 3 15 3C15.8284 3 16.5 3.67158 16.5 4.5Z">
        <animate attributeName="fill-opacity" begin="0s" dur="1s" values="0;1;1;1;1;1;1;1" calcMode="linear" repeatCount="indefinite"></animate>
    </path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 6.07538C21.6716 6.07538 21 6.74696 21 7.57538C21 8.4038 21.6716 9.07538 22.5 9.07538C23.3284 9.07538 24 8.4038 24 7.57538C24 6.74696 23.3284 6.07538 22.5 6.07538Z">
        <animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;0;1;1;1;1;1;1" calcMode="linear" repeatCount="indefinite"></animate>
    </path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M27 15C27 14.1716 26.3284 13.5 25.5 13.5C24.6716 13.5 24 14.1716 24 15C24 15.8284 24.6716 16.5 25.5 16.5C26.3284 16.5 27 15.8284 27 15Z">
        <animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;1;0;1;1;1;1;1" calcMode="linear" repeatCount="indefinite"></animate>
    </path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M22.4247 20.9246C21.5963 20.9246 20.9247 21.5962 20.9247 22.4246C20.9247 23.253 21.5963 23.9246 22.4247 23.9246C23.2531 23.9246 23.9247 23.253 23.9247 22.4246C23.9247 21.5962 23.2531 20.9246 22.4247 20.9246Z">
        <animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;1;1;0;1;1;1;1" calcMode="linear" repeatCount="indefinite"></animate>
    </path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M15 24C14.1716 24 13.5 24.6716 13.5 25.5C13.5 26.3284 14.1716 27 15 27C15.8284 27 16.5 26.3284 16.5 25.5C16.5 24.6716 15.8284 24 15 24Z">
        <animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;1;1;1;0;1;1;1" calcMode="linear" repeatCount="indefinite"></animate>
    </path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.57532 20.9246C6.7469 20.9246 6.07532 21.5962 6.07532 22.4246C6.07532 23.253 6.7469 23.9246 7.57532 23.9246C8.40374 23.9246 9.07532 23.253 9.07532 22.4246C9.07532 21.5962 8.40374 20.9246 7.57532 20.9246Z">
        <animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;1;1;1;1;0;1;1" calcMode="linear" repeatCount="indefinite"></animate>
    </path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 15C6 14.1716 5.32842 13.5 4.5 13.5C3.67158 13.5 3 14.1716 3 15C3 15.8284 3.67158 16.5 4.5 16.5C5.32842 16.5 6 15.8284 6 15Z">
        <animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;1;1;1;1;1;0;1" calcMode="linear" repeatCount="indefinite"></animate>
    </path>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.57532 6.07538C6.7469 6.07538 6.07532 6.74696 6.07532 7.57538C6.07532 8.4038 6.7469 9.07538 7.57532 9.07538C8.40374 9.07538 9.07532 8.4038 9.07532 7.57538C9.07532 6.74696 8.40374 6.07538 7.57532 6.07538Z">
        <animate attributeName="fill-opacity" begin="0s" dur="1s" values="1;1;1;1;1;1;1;0" calcMode="linear" repeatCount="indefinite"></animate>
    </path>
</svg>

但是，它似乎只在 Chrome 中制作动画，而不是在 Firefox 和 Edge 中。根据caniuse，应该是Firefox和Edge都支持的。我做错了什么？

【问题讨论】：

它适用于 Firefox 中的 mi。旧版本的 Edge 不支持 SMIL。显然 Edge 79（2020 年 1 月 15 日发布）也将支持 SMIL 动画
您可以使用fakesmile 在旧版Edge 中支持SMIL

标签： html firefox svg microsoft-edge svg-animate

【解决方案1】：

您在代码中使用 SVG SMIL animation，在 Microsoft Edge 中为 not supported。

您可以使用 polyfills 使其在 Microsoft Edge 中得到支持。

下载并实现smil-in-javascript.js文件和web-animations.js文件：

<script type="text/javascript" src="smil-in-javascript.js"></script>
<script type="text/javascript" src="web-animations.js"></script>

那么动画在Edge中就可以正常工作了：

【讨论】：