Snap.svg在2D軸上的動畫位置

Question

通過關於Snap.svg的其他文章，我沒有看到有關簡單使用動畫功能的很多解釋。

我不太明白使用 element.animate的文檔和當前示例。

我看到有特定的事情可以完成（變換，旋轉）..但是如果我想在簡單的2D軸上移動一些東西呢？

這裏是我當前的代碼片段：

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

我toggleColor鏈接到點擊一個按鈕，所以我在if-else語句中的兩個條件之間切換。

有人可以請我告訴我如何修改變換中的屬性向左 - >向右或向上 - >向下？

如果有更多的信息對我提供幫助，請告訴我。謝謝。

Answer 1

爲了控制翻譯：transform: 't300,300'規模：transform: 's2'旋轉：transform: 'r45'
你可以把所有單statment：

： transform: 's2r45,300,300'

您可以通過Snap("#elevBox");

有益的參考選擇的任何元素

謝謝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>