Анимация SVG работает правильно в Chrome, но не в Firefox

Анимация SVG работает правильно в Chrome, но не в Firefox. Я пытаюсь запустить анимацию через 0,4 секунды после загрузки страницы. Вот код

<svg width="300px" height="300px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
 <circle cx="150" cy="150" r="70">
        <animate dur="2s" attributeName="r" begin=".4" restart="whenNotActive" calcMode="spline" values="0; 100; 70; 50; 70; 95; 70; 60; 70; 75; 70; 68; 70" keySplines="0 .75 .5 1; .5 0 1 .25; 0 .25 .25 1; .5 0 1 .5; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1" keyTimes="0; 0.2564; 0.5128; 0.6154; 0.6923; 0.7436; 0.7949; 0.8462; 0.8974; 0.9231; 0.9487; 0.9744; 1" fill="freeze"></animate>
    </circle>
</svg>

Что я делаю не так ?


svg google-chrome firefox svg-animate
person matuag    schedule 22.06.2014    source источник
comment
Пожалуйста, точно опишите, что происходит не так, неправильная работа не очень полезна для читателя.   -  person Baum mit Augen    schedule 22.06.2014
comment
В firefox вообще не анимируется.   -  person matuag    schedule 22.06.2014
comment
проблема с begin=.4, проверьте здесь jsfiddle.net/aTY4y   -  person Anju Aravind    schedule 22.06.2014
comment
@Ann Reggie Спасибо за помощь !!! :)   -  person matuag    schedule 22.06.2014

Ответы (1)


arrow_upward
1
arrow_downward

Ваш синтаксис неверен для начала. Попробуйте 0,4 с, а не 0,4, и это сработает. Синтаксис приведен здесь, и Firefox точно его реализует. Я предлагаю вам сообщить об ошибке в Chrome, что он работает неправильно.

Вот ваш тесткейс исправлен...

<svg width="300px" height="300px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
 <circle cx="150" cy="150" r="70">
        <animate dur="2s" attributeName="r" begin="0.4s" restart="whenNotActive" calcMode="spline" values="0; 100; 70; 50; 70; 95; 70; 60; 70; 75; 70; 68; 70" keySplines="0 .75 .5 1; .5 0 1 .25; 0 .25 .25 1; .5 0 1 .5; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1" keyTimes="0; 0.2564; 0.5128; 0.6154; 0.6923; 0.7436; 0.7949; 0.8462; 0.8974; 0.9231; 0.9487; 0.9744; 1" fill="freeze"></animate>
    </circle>
</svg>
person Robert Longson    schedule 22.06.2014
comment
Это решило мою проблему, чисто моя вина. Спасибо и спасибо за помощь :) - person matuag; 22.06.2014