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

Question

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

 <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应该支持它。我在做什么错？

Answer 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中正常工作：