Анимированный SVG не работает в Firefox, работает в Chrome

Question

Анимированный SVG не работает в Firefox, работает в Chrome

Я не уверен, что мне нужно изменить в этом 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>

9

svg firefox svg-animate

Источник

user1427457 30 июн '17 в 16:15

1 ответ

Решение

Другие вопросы по тегам svg firefox svg-animate

user1038015 30 июн '17 в 17:33 2017-06-30 17:33 · Accepted Answer · 2017-06-30 17:33

Спецификация 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>