Snap.svg анимационное положение на оси 2d

Question

Просматривая другие сообщения о Snap.svg, я не вижу много объяснений относительно простого использования функции анимации.

Я не могу понять документацию и примеры использования element.animate.

Я вижу, что есть конкретные вещи, которые можно сделать (преобразовать, повернуть) .. но что, если я хотел бы просто переместить что-то на простой двумерной оси?

Вот мой текущий фрагмент кода:

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'
Вы могли бы сделать все в одном даного: transform: 's2r45,300,300'

Вы можете выбрать любой элемент, Snap("#elevBox");

Полезные ссылки:

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