Анимация SVG

Есть много разных способов анимировать SVG-изображения. Сейчас я рассмотрю и сделаю себе пометки, как сделать самую простую анимацию.

Пример анимации SVG с помощью плагина Vivus.js

See the Pen Animate SVG by Vivus.js by Denis (@deniscreative) on CodePen.0

Простые шаги для анимации SVG:

1. Используем плагин Vivus.js
2. Подключаем свой файл SVG или подгружаем его в object
3. Добавляем в JS код для анимации SVG

Подробная документация здесь https://github.com/maxwellito/vivus#vivusjs.

Несколько важных моментов:

• Анимация всегда рисует элементы в том же порядке, что и в теге SVG.
• SVG должны быть сделаны с обводкой, а не заливкой, потому что заливка не анимируется. Протестировать свой SVG-файл можно здесь – просто загрузите свое изображение и проверьте, будет ли оно анимироваться. Если правильно все сделано, то будет.
• Вы должны избегать создания каких-либо скрытых элементов path в SVG. Vivus считает, что все они могут быть анимированы, поэтому рекомендуется удалить их, прежде чем создавать анимацию с ним. Если они не удалены, анимация может не достичь желаемого эффекта, при этом появятся пробелы и пробелы.
• text элементы не поддерживаются, они не могут быть преобразованы в path элементы.

Использовать svg-картинки можно разными способами, не только инлайново.

Способ 1 – Встроенный SVG

HTML

<svg id="my-svg">
  <path...>
  <path...>
  <path...>
</svg>

JS

<script>
  new Vivus('my-svg', {duration: 200}, myCallback);
</script>

Способ 2 – Динамическая подгрузка svg в объект

HTML

<object id="my-svg" type="image/svg+xml" data="link/to/my.svg"></object>

JS

<script>
  new Vivus('my-svg', {duration: 200}, myCallback);
</script>

Способ 3 – Динамическая подгрузка svg в блок

HTML

<div id="my-div"></div>

JS

<script>
  new Vivus('my-div', {duration: 200, file: 'link/to/my.svg'}, myCallback);
</script>

Рабочий пример по второму примеру:

<object id="content-cash-graph" class="content-cash-graph" type="image/svg+xml" data="https://denis-creative.com/wp-content/uploads/2018/10/graph.svg"></object>

new Vivus('content-cash-graph', {duration: 200, forceRender: false });

При тестировании локально последние 2 способа не сработают в браузере Chrome.

По умолчанию, созданный object будет принимать размер родительского элемента, и он должен иметь высоту и ширину, или ваш SVG может не отображаться.

Для ИЕ при большом файле svg может быть торможение, нужно добавить forceRender: false.

Если нужно отредактировать этот объект (из способа 2 и 3), то это возможно с помощью колбэка onReady:

new Vivus('my-div-id', {
  file: 'link/to/my.svg',
  onReady: function (myVivus) {
    // `el` property is the SVG element
    myVivus.el.setAttribute('height', 'auto');
  }
});

Хак №1

Во встроенном SVG очень легко анимировать цвет заливки с помощью нескольких строк CSS.

Допустим, у вас есть инлайновый элемент SVG на вашей странице с идентификатором mySVG. Вы применяете следующий CSS, чтобы сделать его заливку прозрачностью 0 по умолчанию, и зададим класс с прозрачностью 1 (с transition). Затем, как только анимация закончится, класс будет добавлен к svg.

/* Style */
#mySVG * {
  fill-opacity: 0;
  transition: fill-opacity 1s;
}

#mySVG.finished * {
  fill-opacity: 1;
}

/* JavaScript */
new Vivus('mySVG', {}, function (obj) {
  obj.el.classList.add('finished');
});

ПРЕДУПРЕЖДЕНИЕ: этот хак не будет работать с изолированными решениями, такими как использование тега object. Будет работать только для инлайнового SVG элемента.

Конструктор

Конструктор Vivus запрашивает 3 параметра:

• ID (или объект) элемента DOM для взаимодействия. Это может быть встроенный SVG или элемент контейнера для добавления тега object из опции file.
• Объект Option (доступные опции можно найти здесь).
• Функция callback для вызова в конце анимации (необязательно).

Виды анимации

See the Pen Animate SVG by Vivus.js – Animation Types by Denis (@deniscreative) on CodePen.0

Подробная документация здесь https://github.com/maxwellito/vivus#vivusjs.

Интересный момент, что на сайте Vivus свое лого они анимировали совсем по другому, но тоже очень интересно. Скорее всего из-за того, что это решение лучше подходит для анимации заливки. Посмотрите пример, как они сделали:

See the Pen Vivus logo svg animate by Denis (@deniscreative) on CodePen.0