Animated SVG does not work in Firefox, works in Chrome

Question

I'm not sure what I need to modify in this SVG in order to make it compatible with Firefox? The animation works fine in other browsers but in Firefox it's just a static image and it does not animate.

<svg width='360px' height='360px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-balls">
    <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
    <g transform="rotate(0 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur=".75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur=".75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#DB3341;#42a3cf" />
        </circle>
    </g>
    <g transform="rotate(72 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur=".75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur=".75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#42a3cf;#76478a" />
        </circle>
    </g>
    <g transform="rotate(144 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur=".75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur=".75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#76478a;#99c763" />
        </circle>
    </g>
    <g transform="rotate(216 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur=".75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur=".75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#99c763;#ebbc3c" />
        </circle>
    </g>
    <g transform="rotate(288 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur=".75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur=".75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#ebbc3c;#DB3341" />
        </circle>
    </g>
    <circle r="6" cx="50" cy="50" stroke="black" fill="none" stroke-width="2.75"></circle>
</svg>

score 19 · Accepted Answer · answered Jun 30 '17 at 17:33

The SMIL specification says that durations cannot start with a leading decimal point. Firefox implements the specification as written, Chrome does not. Converting from dur=".75s" to dur="0.75s" will fix it in a cross-browser fashion.

<svg width='360px' height='360px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-balls">
    <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
    <g transform="rotate(0 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="0.75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur="0.75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#DB3341;#42a3cf" />
        </circle>
    </g>
    <g transform="rotate(72 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="0.75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur="0.75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#42a3cf;#76478a" />
        </circle>
    </g>
    <g transform="rotate(144 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="0.75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur="0.75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#76478a;#99c763" />
        </circle>
    </g>
    <g transform="rotate(216 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="0.75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur="0.75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#99c763;#ebbc3c" />
        </circle>
    </g>
    <g transform="rotate(288 50 50)">
        <circle r="3" cx="30" cy="50">
            <animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="0.75s" values="0 0;13.819660112501051 -19.02113032590307" keyTimes="0;1" />
            <animate attributeName="fill" dur="0.75s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#ebbc3c;#DB3341" />
        </circle>
    </g>
    <circle r="6" cx="50" cy="50" stroke="black" fill="none" stroke-width="2.75"></circle>
</svg>

mine was the error in `values` attribute that's why it was not working in firefox — Ahmed Ali, Apr 13 '20 at 16:15

Animated SVG does not work in Firefox, works in Chrome

1 Answers1