Firefox/Gecko는 SVG에서 transform = "rotate (...)"애니메이션을 적용 할 수 없습니까?

Question

내가 작업하고있는 페이지에서 사용자가 객체를 클릭하면 SVG 그룹 하나가 회전하면서 다른 SVG 그룹이 회전합니다.

코드는 WebKit에서 잘 작동하지만 isn 도마뱀에서 일하는 것이 전혀 아닙니다. 여기 도마뱀에 의해 실행되고 있지 않은 코드 블록은 :

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

웹킷은 아마 기본값을 가정합니다. http://javascript.crockford.com/code.html이

jslint 같은 툴이 도움이됩니다 : 당신은 당신의 코드를보다 읽기 쉽게 만들 것입니다 코드 규칙을 채택 할 경우

또한, 단지 제안, 미래에, 이와 같은 오류를 발견하기 쉬울 수 있습니다.