Ошибка SVG SMIL в Safari

Я смотрел статью о анимации SVG.Ошибка SVG SMIL в Safari

Code: http://codepen.io/chriscoyier/pen/DpFfE

Статья: http://css-tricks.com/svg-shape-morphing-works/

работает хорошо в Safari рабочем столе, за исключением (и я думаю, и на IOS). Кнопка должна переключаться между желтой звездой и зеленым контрольным символом.

Анимация работает хорошо, первые два раза запускается анимация, а в третий раз я получаю зеленую звезду вместо зеленой проверки. Таким образом, цветная анимация выполнялась, но не анимация формы. После этого все не так.

Любые идеи о том, что не так?

Благодаря

источник

2014-12-17 badtant

Сообщить его как WebKit ошибка в WebKit ошибка трекера. –

сделано. но в то же время, какие-либо идеи о том, как это сделать по-другому, и заставить его работать в сафари? предпочтительно без какой-либо большой библиотеки как snap.svg – badtant

я имел незначительные успехи с этой методологией: svgroot.pauseAnimations вызова() вызова svgroot.setCurrentTime (0) svgroot.unpauseAnimations вызова() рекомендуемой в этой теме: HTTP://stackoverflow.com/questions/10942013/smil-animations-fail-on-dynamically-loaded-external-svg Немного обновлено codepen http://codepen.io/anon/pen/raZGVW – ramoneguru

У меня была такая же проблема, но я решил с помощью от this post: трюк заключается в перезагружать времени для анимации с формой вашей SVG inits:

var variconMorphID = document.getElementById("navbar-icon-hot"); 

var animationToHome = document.getElementById("morph-to-home"); 
var animationToFire = document.getElementById("morph-to-fire"); 

if (button.classList.contains("saved")) { 
    button.classList.remove("saved"); 
    animationToFire.beginElement(); 
    buttonText.innerHTML = "Save"; 
    } else { 
    button.classList.add("saved"); 

    variconMorphID.pauseAnimations(); 
    variconMorphID.setCurrentTime(0); 
    variconMorphID.unpauseAnimations(); 

    animationToHome.beginElement(); 
    buttonText.innerHTML = "Saved!"; 
    }

Вот пример в CODEPEN:

http://codepen.io/jesuscmd/details/wWBEgR/

источник

2016-06-01 23:59:47 jesuscmd123

Ошибка SVG SMIL в Safari

ответ

Смежные вопросы