snap.svg로 마우스를 올리면 애니메이션이 확대/축소됩니다.

Question

애니메이션 (감사 IE)에 대한 IE 지원이 부족하기 때문에 SVG를 만들고 snap.svg에서 애니메이션을 만듭니다. 내가 가지고있는 가장 기본적인 형태는 호버상에서 회전하고 싶은 펜타곤입니다. 마우스를 올리면 다시 리셋됩니다. 코드는 아래의 바이올린에 위치 (분명히이 진짜의 삭감 버전이지만 분명 여전히 버그를 보여줍니다)

JS는 다음과 같다 : 여기이 동작의

// Set up snap on the svg element 
var svgElement = Snap("#svg"); 

// Create the hover on and off events 
var hoverover = function() { 
    svgElement.select('#pentagram-one').stop().animate({transform: 's1r72,500,515'}, 1000); 
}; 
var hoverout = function() { 
    svgElement.select('#pentagram-one').stop().transform('s1R0,500,515'); 
}; 

// Set up the functions for hover in and out 
svgElement.select('#pentagram-one').hover(hoverover, hoverout); 

바이올린 데모 : http://jsfiddle.net/kfs8o9mw/

펜탁은 첫 번째 호버가 예상대로 회전합니다. 그러나 두 번째로 그것을 할 때 펜타곤은 완전히 예기치 않게 조금씩 확대하고 축소합니다 (올바른 크기로 끝나지만 애니메이션에서는 그렇지 않습니다). 그리고 IE (10), Chrome 및 Firefox에서이를 복제 할 수있었습니다.

snap.svg에 버그가 있습니까? 아니면 코드에 문제가 있습니까? 당신은 단순히 다음에 s1 당신이 쇼와 규모에 대한 정의 제거 할 수있는 사전

Answer 1

에

감사 :

또한, 당신이 hoverout의 변환 이벤트에 자본 R를 사용하고 있습니다 이 소문자해야 할 때 r

http://jsfiddle.net/3phpbef7/2/

나는 또한 당신에게 오각형 전자를 정의 할 변수를 여러 번 사용할 때 변수로 사용하십시오. 나는 또한 이것을 위의 피들에 포함 시켰습니다.

희망이 있습니다.