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

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

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

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

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

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

<embed src="myImage.svg">

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

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

Было:

Структура SVG

Стало:

Группировка элементов SVG

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

Изменение цвета SVG

Получаем:

SVG закрашенный с помощью fill

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 картинке, второй - группе элементов, которую будем анимировать.

Создание SVG анимации используя defs и id

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

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

var myAnimeClick = document.getElementById("hammer");
myAnimeClick.addEventListener("click", function () {
    this.classList.toggle("addAnimation");
});
Создание SVG анимации при клике

Результат:

SVG анимация в HTML

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

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

Вставка SVG в HTML

Получаем:

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

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

Вставка SVG embed

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

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

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

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

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

Добавить класс внутри SVG

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

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

Анимация SVG при наведении

Результат:

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

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

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