Firefox/Gecko не может анимировать transform="rotate(...)" в SVG?

Question

На странице, над которой я работаю, когда пользователь нажимает на объект, одна группа SVG вращается, а другая вращается.

Код, как он есть, прекрасно работает в WebKit, но совсем не работает в Gecko. Вот блок кода, который не выполняется Gecko:

var totStep = dur*2/msrate, step=0;
window.timer = window.setInterval(function(){
    if(step<totStep/2){
    var inangle = -50*easeIn(step,totStep/2);
    iris.setAttribute("transform","rotate("+inangle+" 23 -82)");}else{
    var prog = easeOut2((step-(totStep/2)),totStep/2);
    var outangle = 50*prog;
    var down = 400*prog;
    vinyl.setAttribute("transform","rotate("+(-50+outangle)+" 986 882)");
    needle1.setAttribute("transform","translate(0 "+(-400+down)+")");
    buttons.setAttribute("transform","translate(0 "+(-400+down)+")");}
    step++;
    if (step > totStep) {window.clearInterval(window.timer); return}
});

Большая часть этого кода взята из функции, которая открывает глаза при загрузке страницы, и эта функция прекрасно работает в Gecko, поэтому для меня это загадочно.

Вы можете увидеть страницу со всем ее исходным кодом на этой странице. Проблемная функция написана в связанном eye.js. Проблема возникает, когда пользователь нажимает "DJ Docroot" в разделе "Музыка" меню, доступ к которому можно получить, щелкнув в любом месте.

Answer 1

Вам не хватает второго аргумента для setInterval, чтобы указать интервал, через который должна вызываться функция. Так, например, работает следующий код:

window.timer = window.setInterval(function(){
    if(step<totStep/2){
    var inangle = -50*easeIn(step,totStep/2);
    iris.setAttribute("transform","rotate("+inangle+" 23 -82)");}else{
    var prog = easeOut2((step-(totStep/2)),totStep/2);
    var outangle = 50*prog;
    var down = 400*prog;
    vinyl.setAttribute("transform","rotate("+(-50+outangle)+" 986 882)");
    needle1.setAttribute("transform","translate(0 "+(-400+down)+")");
    buttons.setAttribute("transform","translate(0 "+(-400+down)+")");}
    step++;
    if (step > totStep) {window.clearInterval(window.timer); return}
},10);

Webkit, вероятно, просто принимает значение по умолчанию.

Кроме того, просто предложение, в будущем, возможно, будет легче обнаружить подобные ошибки, если вы примете кодовые соглашения, которые сделают ваш код более разборчивым: http://javascript.crockford.com/code.html

Инструмент как jslint поможет с этим.