SVG анимация

Сегодня поговорим об анимации SVG. Реализуем следующее: при клике на svg-изображение, будет проигрываться анимация. А также попутно познакомимся с тегами <g></g> и <defs></defs>.

Содержание:

1. Анимация внутри SVG
   1. Подключение svg с помощью тега <embed>
   2. Объединение нужных слоёв в группу
   3. Создание SVG-анимации
   4. Выполнение анимации при клике на SVG картинку
   5. Результат
2. Анимация внутри HTML
   1. Добавление классов внутри SVG
   2. Создание анимации
   3. Результат

Для примера я скачал svg картинку.

Анимация внутри SVG

Нам необходимо выполнить следующие действия.

1. Загрузить svg изображение на страницу с помощью тега <embed>.
2. Сгруппировать необходимые слои для дальнейшей работы.
3. Создать анимацию с помощью @keyframes.
4. Реализовать выполнение анимации при клике на SVG картинку.

Все манипуляции с SVG будем выполнять прямо внутри самого изображения. Таким образом нашу SVG анимацию можно будет использовать в других проектах.

1. Подключение svg с помощью тега <embed>

<embed src="myImage.svg">

2. Объединение нужных слоёв в группу

Чтобы сгруппировать необходимые элементы, обернём их в тег <g></g>

Было:

Стало:

Для проверки, верно ли мы объединили элементы, зададим группе какой-нибудь цвет, например зелёный.

Получаем:

3. Создание SVG-анимации

Будем писать css код прямо внутри SVG, это позволит использовать изображение независимо от данного проекта.

CSS и JavaScript будем писать в теге <defs></defs>. Данный тег скрывает внутреннее содержимое от браузера и используется для создания эффектов и изменения стилей.

<defs>
    <style>
        @keyframes myAnime {
            0% {
                transform-origin: 70% 20%;
                transform: rotate(0deg);
            }

            50% {
                transform-origin: 70% 20%;
                transform: rotate(-40deg) translate(-50px);
            }

            100% {
                transform-origin: 70% 20%;
                transform: rotate(0deg) translate(0);
            }
        }

        #hammer.addAnimation #hammer-group {
            animation: myAnime .22s ease-out;
        }
    </style>
</defs>

Нижний блок кода необходим для того чтобы, когда мы будем нажимать на SVG картинку, то ей будет добавляться class addAnimation, на который мы повешали проигрывание анимации

Так же я использовал два id, из которых, первый — я дописал самой svg картинке, второй — группе элементов, которую будем анимировать.

4. Выполнение анимации при клике на SVG картинку

Внутри тега defs под style будем писать js-код в теге script.

var myAnimeClick = document.getElementById("hammer");
myAnimeClick.addEventListener("click", function () {
    this.classList.toggle("addAnimation");
});

Результат:

SVG анимация в HTML

Для примера, давайте теперь реализуем анимацию SVG непосредственно в самом HTML.

Вставим svg изображение прямо в HTML код страницы.

Получаем:

Важный момент, все изменения с id и class действуют на всей HTML странице.

В предыдущем примере все действия были изолированы. Они работали только внутри самого SVG, т.к. картинку мы подключали с помощью embed.

Реализуем следующую анимацию: при наведении на наш смайлик, будем выпучивать ему глаза.

Порядок действий:

1. Добавим классы для элементов, которые хотим анимировать.
2. Создадим анимацию при наведении на смайлик.

1. Добавление классов внутри SVG

Добавим для глаз класс eye, чтобы в дальнейшем с помощью CSS или JavaScript их анимировать.

2. Создание анимации SVG

Теперь, в отличие от предыдущего примера, мы будем писать CSS код прямо в HTML текущей страницы.

Результат:

Мы рассмотрели наиболее простые варианты создания анимации, суть думаю все поняли.

1. Добавляем svg-изображение на страницу (мы рассмотрели embed и inline-svg).
2. Создаём анимацию. Анимировать как вы догадались можно как угодно и что угодно. Все теги, какие вы сможете найти в SVG, вы можете изменять: цвет, размер, даже переписывать содержимое тегов, например, изменять тег d, который определяет пути для рисования.
3. Выполнять анимацию при каком-либо событии (мы рассмотрели click и hover). Вы можете воспроизводить анимацию и при других событиях, таких как: правый клик мыши, когда мышка покидает какой-то элемент, при отправке формы, при фокусе на каком-либо элементе, после полной загрузки DOM-дерева, после завершения какой-либо другой анимации, и т.п.

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

• Как вставить SVG на сайт.
• Как изменить цвет SVG изображения.