Question

在我正在处理的页面中，当用户点击某个对象时，一个SVG组会在另一个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中运行正常，这就是为什么这对我来说很神秘。

您可以在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这样的工具会对此有所帮助。

Firefox / Gecko无法在SVG中为transform =“rotate（...）”制作动画？

1 个答案: