Snap.svg 2d軸での位置のアニメーション

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'
あなたは、すべて単一なステートメントで作ることができます

ありがとうございました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>