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的工具将帮助这一点：

而且，只是一个建议，在将来，它可能如果采用编码规范，这将使你的代码更清晰更容易辨认这样的错误。