Firefox/Gecko無法在SVG中動畫transform =「rotate（...）」？

Question

在頁面我工作，當用戶點擊一個對象，一個SVG組旋轉出來的，而另一個旋轉的方式。

的代碼，因爲它的作品只是在WebKit的罰款，但它不是在壁虎里根本不工作。這裏是一個沒有被壁虎執行的代碼塊：

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} 
}); 

大部分代碼是從打開網頁時加載的眼睛的功能適應，而且功能壁虎，這是正常工作爲什麼這對我來說是神祕的。

你可以看到網頁的所有源代碼在this page。有問題的功能寫在鏈接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的工具將幫助這一點：

而且，只是一個建議，在將來，它可能如果採用編碼規範，這將使你的代碼更清晰更容易辨認這樣的錯誤。