Що таке svg? Анімуємо svg об`єкти.

Відео: SVG анімації - CSS, SMIL і Snap.svg

Отже, ми вже багато знаємо про SVG. Ми можемо малювати якісь об`єкти, стилізувати їх і писати текст, але є ще одна класна річ - анімація. Ось про те, як анімувати SVG об`єкти, ми і поговоримо в цій статті.

Для анімації служить тег animate. Атрибут attributeName приймає назву того атрибуту, який ми будемо анімувати, from і to, власне, початкове і кінцеве значення, а в dur ми вказуємо скільки секунд буде тривати анімація.

Також ми можемо анімувати положення об`єкта на сторінці. Як ви пам`ятаєте, атрибут x і y вказуємо положення по осі x і по осі y. Ось, щоб пересунути об`єкт, ми будемо анімувати ці атрибути.

Тут ми анімуємо атрибут x, тобто становище по осі x, а атрибут fill зі значенням freeze заморожує об`єкт на тому місці, де він зупинився. Якщо ви його заберете, то після анімації об`єкт повернеться на первісну позицію.

Якщо вам потрібно анімувати відразу кілька атрибутів, то вкажіть кілька тегів animate.

І нарешті, ви можете трансформувати об`єкти за допомогою тега animateTransform.

Атрибут type може приймати значення scale (масштаб), translate (переміщення) і rotate (поворот).