SVG SMIL animation not working in Firefox and Edge

Question

I'm using the following SVG as a spinner in an HTML document:

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

However, it only seems to be animating in Chrome, and not in Firefox and Edge. According to caniuse, it should be supported by Firefox and Edge. What am I doing wrong?

It works for mi in Firefox. Older versions of Edge doesn't support SMIL. Apparently Edge 79 (released 15 Jan 2020) will support SMIL animations as well — enxaneta, Jan 20 '20 at 15:21
You can use [fakesmile](https://leunen.me/fakesmile/faq.html) to support SMIL in older Edge — Robert Longson, Jan 20 '20 at 15:41

score 1 · Answer 1 · answered Jan 21 '20 at 02:25

You use SVG SMIL animation in your code which is not supported in Microsoft Edge.

You could use polyfills to make it supported in Microsoft Edge.

Download and implement the smil-in-javascript.js file and web-animations.js file:

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

Then the animation can work well in Edge:

SVG SMIL animation not working in Firefox and Edge

1 Answers1