Search code examples
firefoxsvgsvg-animate

Animated SVG does not work in Firefox, works in Chrome

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

  • The SMIL specification says that durations cannot start with a leading decimal point. Firefox used to implement the specification as written, but changed to match Chrome some time ago. The SVG in the question will run as written in Firefox these days.

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