动画 SVG 在 Firefox 中不起作用，在 Chrome 中起作用

Question

我不确定我需要在此 SVG 中修改什么以使其与 Firefox 兼容？动画在其他浏览器中运行良好，但在 Firefox 中它只是一个静态图像并且没有动画效果。

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

Answer 1

SMIL 规范规定持续时间不能以前导小数点开头。 Firefox 实现了所写的规范，Chrome 没有。从 dur=".75s" 转换为 dur="0.75s" 将以跨浏览器的方式修复它。

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

动画 SVG 在 Firefox 中不起作用，在 Chrome 中起作用

Animated SVG does not work in Firefox, works in Chrome

firefox

svg

svg-animate