Анимация SVG при наведение на родительский блок
У меня есть карточка у нее есть стрелка
При наведение на родительский блок я хочу получить такую стрелку
Изначально пробовал через псевдо элемент подставлять линию и при наведение я у svg менял fill и анимировал псевдо элемент, но столкнулся с проблемами при изменение ширины экрана псевдо элемент съезжал
.stages-item__icon < &::before < content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; width: 24px; height: 2px; background-color: #748198; transition: width 0.5s; >> Хотелось бы узнать как анимировать саму svg?
Анимация значков
Лампочка состоит из polygon для внешнего треугольника и path для самой лампочки.
Стили вынесем отдельно.
При наведении курсора срабатывает :hover и меняется цвет треугольника и лампы с анимацией в 1 секунду (transition-duration).
Часы
Часы тоже состоят из внешнего треугольника, а также добавлены два круга для циферблата и треугольник для минутной стрелки в виде path.
Затемнение треугольника работает также. Вдобавок добавлена анимация вращения минутной стрелки (может не работать в некоторых браузерах).
Диафрагма
Опять внешний треугольник и набор путей. При наведении указателям мыши детали сдвигаются и меняют размеры. Движения относительны оригинального размера элемента и корректно работает при изменении размеров страницы.
Интерактивные SVG изображения на CSS и JavaScript
Если вы хотите придать вашему сайту интерактивности, проиллюстрировать контент полезной инфографикой, вы можете использовать для этого все возможности SVG файлов.
SVG изображения можно сделать анимированными с помощью таблиц стилей CSS. А при подключении внешнего JavaScript кода управлять отдельными элементами SVG файла.
В этой статье мы рассмотрим весь процесс создания такого изображения от графического редактора до вывода на сайт. Примером будет служить такой SVG файл:
Экспорт в SVG формат
Я использую для работы Photoshop, поэтому информация будет описываться на его основании, но всё то же можно выполнить и через Adobe Illustrator.
Итак, первым делом создаём необходимое нам изображение в кривых. Каждый элемент на отдельном слое.
Далее делаем экспорт в SVG формат.
Полученный файл можно открыть в любом текстовом редакторе. Удобнее это будет сделать через редактор с поддержкой HTML и CSS синтаксиса.
SVG анимация через CSS
Наш пример будет выглядеть следующим образом. Как видите, файл уже содержит некий CSS код, для придания цвета фона определенным элементам. Теги элементов уже содержат названия классов и идентификаторов. Если таковых нет, вы можете их определить сами.
Изменим текущий CSS код, чтобы придать изображению эффект плавной прорисовки на экране, а также эффектов от наведения мышью на отдельные элементы.
Между тегами мы можем оставить только стили CSS, остальное смело удаляем.
Имена идентификаторов у элементов будут такими же, как и названия слоёв и папок в Photoshop. Поэтому для удобства лучше задать названия сразу в Photoshop. Слои, которые были заключены в папки, будут находиться в SVG файле внутри тегов .
CSS внутри SVG файла имеет несколько другие наименования, например:
fill: – определяет цвет фона, аналог «background»;
stroke: — определяет стили для рамок элементов;
stroke-width: — задает толщину рамки. Может принимать как целые, так и дробные значения. Единицы измерения px, em, % и отсутствие таковых;
stroke-linecap: — это свойство задает стиль рамки для начала и конца линии;
Может принимать значения:
butt — прямые углы внутри линии – по умолчанию;
square -прямые углы за пределами линии;
round — скругление на концах, радиус скругления определяется величиной stroke-width.
stroke-dasharray: – задает количество штрихов в рамке фигуры в SVG файле, чтобы можно было изобразить рамку объекта пунктиром. Чем большее число, тем больше отступ между штрихами. Может принимать как целые, так и дробные значения. Единицы измерения: em, % или отсутствие таковых.
Анимация задаётся через знакомые @keyframes, здесь мы не будем детально разбирать принципы создания анимации на CSS, на эту тему есть отдельные статьи.
В нашем примере комбинация атрибутов stroke-dasharray и stroke-dashoffset создает эффект рисования линии. При этом значение stroke-dashoffset меняется от максимума до нуля, чтобы создать видимость плавного заполнения. По умолчанию аттрибут stroke-dashoffset имеет максимальное значение, чтобы линии были не видны.
Вставка SVG файла в HTML код
Для выполнения этой процедуры есть несколько вариантов.
Способ №1
Во-первых, мы все помним, что SVG – это изображение, значит вставить его можно через тег
Но у такого способа есть один недостаток, к вставленному таким образом файлу, нельзя будет получить доступ через JavaScript.
Способ №2
Вставка через теги object или embed:
Способ №3
Вставка через фрейм iframe. Но этот вариант наименее предпочтителен из-за поддержки браузерами, поэтому его мы не рассматриваем.
Доступ к фигурам SVG файла через JavaScript
Дополнительно подключаем библиотеку jQuery для упрощения кода. Первым делом нам нужно дождаться, пока вся графика и наш SVG загрузится, поэтому используем window.onload.
Способ №4
Разместить прямо на сайте всю графику в контейнере . При этом вы сможете применить к фигурам внешние CSS стили.
$(window).load(function ()
var svgobject1 = document.getElementById('myfile'); // Находим тег object по ID
if ('contentDocument' in svgobject1) < //проверяем не пустой ли он
var svgdom = $(svgobject1.contentDocument); //получаем доступ к объектной модели нашего файла
//теперь можем выполнять разные манипуляции
//вывести подсказку при наведении на файл
$('svg', svgdom).on('mousemove', function(e)console.log('Подсказка. ');
>);
//выполнить переход на нужный URL при клике на определенной фигуре
$("#chair", svgdom).click(function()location.href='#';
>);
>
>);
Преимущества и недостатки SVG изображений
К плюсам можно отнести:
- Изменение размера изображений без потери качества;
- Малый вес файлов;
- Возможность создания анимированных изображений с применением CSS;
- Возможность управления фигурами СВГ файла через JavaScript.
Среди недостатков нужно выделить:
- Трудоемкий процесс создания;
- Отсутствие полноценной поддержки в браузерах Internet Explorer
SVG файлы находят применение на сайтах для создания изображений-загрузчиков, интерактивных карт (на замену устаревших тегов — ), создании слайдов, диаграмм и прочего. Возможности применения SVG ограничены лишь вашей фантазией.
Анимируем SVG средствами CSS
SVG-элемент можно анимировать таким же образом, как это происходит с HTML. Для создания анимаций используется @keyframes. В принципе, в сети множество руководств на тему CSS-анимации при этом всё, что там описывается, по сути, применимо и к SVG-формату. Но давайте всё же приведем несколько примеров.
Итак, SVG-документ характеризуется наличием внутренних таблиц стилей, и именно в них и следует писать анимацию:
Собственно говоря, выполнить анимацию SVG-атрибута так же просто, как и в случае с CSS-атрибутами. Обратите внимание, что значения можно задавать как в процентах, так и с помощью конструкции from-to:
Далее останется просто применить к нужному элементу созданные анимации:
Однако все вышесказанное представляет собой статичные анимации. Но что прикажете делать, если нужна интерактивность? Не очень много, но тем не менее кое-что можно сделать интерактивным даже на CSS. К примеру, мы можем воспользоваться transition в сочетании с псевдоклассом hover:
При имплементации примера выше, в случае наведения на элемент он поменяет свой цвет с синего на голубой за 3 секунды.
Итак, анимация атрибутов, как и небольшой кусочек интерактивности, это, по большему счету, основное, что можно сказать об особенностях CSS-анимации. Однако даже этого функционала вполне достаточно в большинстве случаев, ведь многие задачи сводятся к анимации какого-нибудь атрибута. При этом почти любой SVG-атрибут вы можете анимировать. Почему «почти»? Потому, что если вы выберете случайный атрибут, который окажется неанимируемым, то вам очень «повезло», т. к. это большая редкость.