Firefox/Gecko incapable d'animer transform = "rotate (...)" en SVG?

Question

Dans la page sur laquelle je travaille, lorsque l'utilisateur clique sur un objet, un groupe SVG pivote et un autre tourne.

Le code tel qu'il est fonctionne correctement dans WebKit, mais il ne l'est pas. Je ne travaille pas du tout à Gecko. Voici le bloc de code qui ne sont pas en cours d'exécution par 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} 
}); 

La plupart de ce code est adapté d'une fonction qui ouvre l'œil lorsque la page est chargée, et cette fonction fonctionne très bien dans Gecko, qui est pourquoi cela est énigmatique pour moi. Vous pouvez voir la page avec tout son code source à this page. La fonction problématique est écrite dans le eye.js lié. Le problème se produit lorsque l'utilisateur clique sur "DJ Docroot" dans la section "Musique" du menu, accessible en cliquant n'importe où.

Answer 1

Il vous manque un deuxième argument à setInterval pour spécifier l'intervalle auquel la fonction doit être appelée. Ainsi, par exemple, le code suivant fonctionne:

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 suppose probablement juste une valeur par défaut.

En outre, une suggestion, à l'avenir, il pourrait être plus facile de repérer les erreurs comme celles-ci si vous adoptez des conventions de code qui rendront votre code plus lisible: http://javascript.crockford.com/code.html

Un outil comme jslint va aider.