Snap.svg 2 차원 축에서 애니메이션 위치 지정

Question

Snap.svg에 대한 다른 게시물을 살펴보면 애니메이션 기능의 간단한 사용에 대한 많은 설명을 볼 수 없습니다.

설명서 및 사용 예를 잘 이해하지 못합니다. element.animate.

나는 (변환, 회전) 할 수있는 구체적인 것들이 있다는 것을 알고있다. 그러나 단순한 2D 축에서 무언가를 움직이고 싶다면 어떻게해야 할까? 나는 그래서이 if-else 문에서 두 가지 조건 사이에서 전환 버튼을 클릭하는 링크 toggleColor이

var s = Snap("#elevBox"); 
var elev1 = s.select("#elev1"); 
if(toggleColor == 0){ 
    elev1.animate({ 
     //transform: 'translate(-30,100)', 
     transform: "r5,200,200", 
     fill: "lightgreen" 
    }, 1000); 
    toggleColor = 1; 
}else { 
    elev1.animate({ 
     //transform: 'translate(0,0)', 
     transform: "r5,100,100", 
     fill: "red" 
    }, 1000); 
    toggleColor = 0; 
} 

:

여기에 내 현재 코드입니다.

변환에서 왼쪽에서 오른쪽으로 또는 위로> 아래로 속성을 수정할 수있는 사람이 있습니까?

내가 제공하는 데 도움이 될만한 정보가 더 있으면 알려주십시오. 감사.

Answer 1

변환 제어하려면 : transform: 't300,300'는 규모 : transform: 's2'가 회전 :

: transform: 's2r45,300,300'이

당신은 Snap("#elevBox");

유용한 참조하여 모든 요소를 ​​선택할 수 있습니다 : transform: 'r45'이
당신은 모든 단일 한 Statment에서 만들 수

감사합니다. Ian : How do I understand Transform properties in snap.svg?

http://svg.dabbles.info/

http://codepen.io/collection/xnrJc/

var s = Snap("#elevBox"); 
 
var toggleColor = 0; 
 

 

 
function start() { 
 
\t s.animate({ 
 
     transform: 't100,100', 
 
     fill: "lightgreen" 
 
    }, 1000, end); 
 
} 
 

 
function end() { 
 
    \t s.animate({ 
 
     transform: 't300,300', 
 
     fill: "red" 
 
\t }, 1000, start); 
 
} 
 

 

 
start();

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script> 
 
<svg viewBox="0 0 1000 1000"> 
 
\t <rect id="elevBox" x="100" y="100" width="100" height="100"/> 
 
</svg>