Меню

Как изменить цвет svg иконки при наведении



Как изменить цвет svg

Изменим цвет svg картинки двумя способами: сначала используем свойство fill, затем mask-image

Первый способ. Картинка должна быть inline SVG. Если так, тогда просто изменим цвет с помощью свойства fill

Цвет svg картинки изменяется с помощью CSS свойства fill — заливки.

Если svg в вставлено в HTML в виде тега img, то нужно добавить следующий js-код

В данном примере мы используем класс img-svg, который мы добавляем к изображению в HTML-странице, благодаря которому svg-картинка из img станет inline svg

Изображение было в виде тега img

Изображение стало inline svg

Теперь можем изменить цвет нашей svg картинки, используя свойство fill, как в первом примере.

Какие ещё свойства можно применить к svg картинке

Это далеко не полный перечень свойств, которые можно использовать для работы с svg, это лишь самые часто используемые.

Второй способ. Реализуем с помощью свойства mask-image

В HTML создадим два элемента: div и ссылку

Используем свойство mask-image чтобы задать фон для картинки и background-color чтобы задать цвет

Пробуем изменить цвет

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

  • Как вставить svg на сайт
  • Анимация svg
English Russian
Scalable Vector Graphics Масштабируемая векторная графика
Fill Заполнение
Stroke Обводка

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.

Источник

Как изменять цвет svg иконки?

SVG можно размещать как inline-кодом (т.е. SVG-код прямо в дерево HTML), так и как обычное изображение. Первый случай в примере, который я нагуглил. При этом вам доступна возможность управлять стилями SVG-элементов через CSS (Да, там другие свойства, а некоторые просто иначе называются). Кроме того, можно работать и javascript-ом с элементами SVG.
А во втором случае вы получаете просто изображение. И тут для hover вам уже надо делать по-старинке — спрайтами в бэкграунде, например.

Neyury: Если используете первый вариант, то файл как таковой перестаёт существовать. Его SVG-код встраивается в HTML.

Разумеется, когда мы рассматриваем второй случай (вставка в качестве img src или background какого-то html-элемента), то можно использовать еще и data-url:
jsfiddle.net/6WAtQ

Но всё это не дает доступа к SVG.

Есть более сложный (возможно, слабо кроссбраузерный) способ. Использовать для внедрения теги object и т.п. Тогда файл svg будет отдельно и доступ к нему будет некоторым способом.
См.: stackoverflow.com/questions/8102528/how-do-you-acc.

Но, думаю, того не стоит.

Павел Китьян: Я попробовал разные способы подключения svg, пока самый подходящий вариант, это писать inline-кодом. Но это слишком загромождает html код, как вариант можно вставлять этот код при загрузке страницы с помощью js.

Но я хочу попробовать другой вариант, можно вставить svg через object и прописать в самом файле (внутри тега ), это работает но не очень удобно, так же пишут что можно не писать style, а подключить файл.css (тоже в файле svg), но у меня это не получается. Вы случаем не знаете как это сделать? Заранее спасибо.

Neyury: Разумеется, можно подключить стили CSS-файлом. А вот насчёт включения их в сам SVG — есть сомнения, но категорически «нет» не скажу, надо смотреть стандарт.

Если не нравится загромождение кода, то можно пользоваться инклюдами. Либо серверными, либо клиентскими. Зависит от того, какие фреймворки и шаблонизаторы используете.
Например в случае использования ангуляра, наверное можно использовать ng-include и убить сразу двух зайцев. У вас будут отдельные мальенькие HTML-файлы (не полноценные, только с кучком DOM, содержащим SVG-вставку). А при сборке странице, ангуляр сам распихает эти вставки в дерево и к ним применятся стили из CSS-файла, который прописан для главной HTML-страницы.

Возможно, опытные ангулярщики возразят. Не претендую, поскольку недавно за него взялся.

Источник

изменение цвета svg при наведении

Столкнулся с проблемой, связанной с изменением цвета иконок svg. Придерживался этой инструкции.

Читайте также:  Ral 6029 цвет как называется

Есть спрайт svg и отдельный стилевой файл для него:

Подключаю на html через use :

оба варианта ниже не работают

Проблема заключается в изменении цвета при наведении на иконку. Пробовал и fill , и color . Ничего не работает.

а это точно svg? Подсказывают что это растор в обертке svg если это растор,то выходит цвет менять не получится,смысл тогда от такой svg

5 ответов 5

У SVG для покраски строки нужно применять атрибут — stroke:red;

  • Ваше правило CSS должно быть таким :
  • Проверьте также и удалите, если они есть, атрибуты fill , stroke у иконок в спрайте, так как они имеют наивысший приоритет.
  • Добавьте во внешнюю таблицу CSS принудительное наследование для атрибутов SVG:

Это всё относится, конечно к чистому SVG, а у вас действительно растровая иконка встроенная векторным редактором в SVG.

Выбирайте всегда SVG иконки, которые весят немного. Это верный признак того, что они сделаны профессионально,- патчами, а не лепкой, градиентами, маркерами в векторных редакторах.

Выше были теория, но практика всегда интересней?

Скачал две иконки svg c ресурса iconmonstr: youtube — 1.8к; facebook — 0.3k

1. Пример закрашивания одной иконки при наведении

2. Пример анимации закрашивания иконок

Добавлен к первому примеру код второй иконки и анимация закрашивания при наведении:

UPD

Ещё пример, как добавлять социальные иконки и изменять цвет при наведении

Источник

Красивые эффекты для иконок при наведении с помощью CSS3 переходов

Дата публикации: 2015-03-05

От автора: В этой обучающей статье мы рассмотрим создание нескольких красивых (но простых) эффектов для иконок при наведении, созданных при помощи CSS3 переходов и трансформаций.

Иконки. Сегодня они присутствуют везде, в наших приложениях и сайтах, и все они выполняют важные функции. Они указывают пользователям на различные варианты взаимодействия или направляют их по различным внешним ссылкам, например, по ссылкам на социальные сети и другие медиа-сервисы. Иконочные спрайты стали обычным явлением, и важны с точки зрения разработчиков, а также позволяют привлечь внимание пользователей благодаря использованию CSS классов, срабатывающих при наведении. Данные классы способны добавить больше интерактивности и стиля нашим приложениям/сайтам. В этой обучающей статье я планирую показать вам 5 разных состояний иконок, когда на них наведен курсор мыши, для создания которых используются CSS3 переходы и трансформации. Рассмотренные далее состояния иконок будут лучше привлекать внимание конечных пользователей, и, возможно, будут увеличивать показатели кликабельности элементов на сайте или в приложении.

Разметка для наших иконок

Для данной обучающей статьи мы будем использовать иконки, которые ссылаются на что-нибудь, потому что ссылки ассоциируются с состояниями, возникающими при наведении курсора мыши. Наиболее частным примером использования набора иконок, который можно встретить в сети, являются социальные иконки. Я буду использовать следующие 5 иконок, чтобы мы могли увидеть разное поведение иконок в действии:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Каждая из иконок будет иметь по три разных класса:

Класс icon, который является общим для всех иконок

Класс icon-type, который является уникальным для каждого демо-примера

Класс name, который позволит нам позиционировать фоновое изображение, в зависимости от отображаемой иконки, а также использовать различные цвета и т.д.

Итак, в общем у наших иконок будет следующая структура:

Источник

Возможности оформления SVG

Внешний вид SVG-элементам можно задавать как с помощью CSS, так и с помощью SVG-фильтров, градиентов и паттернов — их можно прописывать элементам прямо в коде либо задавать также через CSS.

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

Читайте также:  Мятный цвет это оттенок какого цвета

Из всех способов вставки SVG для этого подходят всего два: иконочный шрифт или инлайновый SVG в HTML (удобнее всего делать это через use ).

Какие стили оформления можно использовать для иконочных шрифтов? Можно задать цвет, добавить тени и анимацию:

Не так уж и много, по сравнению с возможностями обычного SVG.

Для SVG-изображений можно использовать SVG-градиенты и фильтры, например, размытие или тени. Также можно использовать в качестве обводки и заливки паттерны и изображения, а ещё можно красить отдельные части картинок и таким образом получать разноцветные иконки.

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

Вот пример иконок с паттернами в качестве фона:

Пример немного диковат, но он хорошо показывает, что фоном может быть любая картинка. Паттерны заданы в коде страницы и подключены с помощью CSS.

Вот код деревянного паттерна:

В паттерн можно класть всё что угодно: комбинации фигур, объекты с градиентами, текст. Правда, есть подозрение, что сложные фоны могут плохо влиять на производительность страницы, но тестов не делала.

Чтобы при наведении менять местами обводку и заливку, нужно добавить ещё пару строчек:

Также можно делать интересные эффекты на основе обводки:

Обводки могут быть пунктирными, для них можно использовать градиент или паттерн.

Иконкам в последней строке в качестве обводки задан градиент, уходящий в прозрачность, почему-то не работает в последней опере.

С анимацией пуктирной обводки можно делать интересные штуки:

Нажмите Rerun если демо застыло.

Не уверена, что эта анимация подходит для иконок (будет не очень хорошо, если иконки будут шевелиться или исчезать), но она может быть использована для эффектно появляющихся иллюстраций.

Следующий пример демонстрирует иконки с SVG-фильтрами:

Размытие, тень, повторяющийся контур и внутренняя тень (её не очень хорошо видно).

Конечно, размытие врядли подойдет для иконок, но с ним можно придумать разные другие интересные штуки.

У фильтров есть недостаток: результатом наложения фильтров является растровое изображение, из-за чего картинки утрачивают способность тянуться без потерь в качестве и хуже выглядят на экранах с ретиной.

UPD от 19 мая 2014: фильтры хорошо выглядят на ретине, при условии, что они задаются SVG-элементам, а не HTML. Прошу прощения за неточность.

В примере ниже SVG-изображение разделено на несколько путей, что дает возможность обращаться к ним поотдельности. Здесь это используется чтобы задать элементам разные цвета и задержки анимации. При этом в дальнейшем фигура (в данном случае это группа путей) может быть использована целиком — таким образом можно получить не только монохромные иконки, но и разноцветные. Правда, при вставке такого объекта через use в нем перестанет работать анимация, но раскраска сохранится.

В качестве заливки (или обводки) SVG-элементов удобно использовать сurrentColor . Это ключевое слово, обозначающее текущий цвет текста, и если задать его в качестве заливки (обводки) — элемент будет краситься вместе с окружающим текстом.

Если потом для родительского элемента задать цвет текста

фигура зальется этим же цветом. Очень удобно для ссылок по наведению и для страниц с несколькими темами оформления.

Интересно, что в SVG можно использовать далеко не все CSS-свойства, относительно полный список можно найти вот тут. Можно использовать animation , но transition работает странно и не во всех браузерах. CSS-градиенты использовать, к сожалению, нельзя. Трансформации работают.

Также перед использованием различных фильтров и эффектов нужно всегда проверять как они поддерживаются разными браузерами.

Из всего вышеизложенного можно сделать следующие выводы:

  • самые широкие возможности для оформления дает инлайновый SVG;
  • меньше возможностей, но более удобное подключение на страницу предоставляет иконочный шрифт. Существенный минус состоит в проблемах с поддержкой встраиваемых шрифтов в разных браузерах;
  • если SVG-графика нужна только в одном стиле и нет необходимости управления через внешний CSS — лучше всего воспользоваться спрайтом.
Читайте также:  Мед красно коричневого цвета 1

Источник

Change Color of SVG on Hover

AWS Amplify — the fastest, easiest way to develop mobile and web apps that scale.

There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover , :active , :focus , class name change, etc. — is different.

Let’s look at the ways.

Inline SVG is my favorite way to use SVG anyway, in part because of how easy it is to access and style the SVG.

If you’re used to working with icon fonts, one thing you might enjoy about them is how easy it is to change the color. You’re largely limited to a single color with icon fonts in a way that SVG isn’t, but still, it is appealingly easy to change that single color with color . Using inline SVG allows you to set the fill , which cascades to all the elements within the SVG, or you can fill each element separately if needed.

SVG Symbol / Use

There is such thing as an SVG sprite, which is a group of SVGs turned into elements such that any given icon can be referenced easily with a element.

You can still set the fill color from outside CSS rather easily this way, but there are caveats.

    The internal SVG elements (like the

) can have no fill themselves. This allows the fill set from the parent SVG to cascade into the Shadow DOM created by . As soon as you have something like

in the , you’ve lost outside CSS control.

  • Likewise, the fill of individual elements cannot be controlled within the SVG like you could with inline SVG. This means you’re pretty firmly in single-color territory. That covers most use cases anyway, but still, a limitation nonetheless.
  • SVG background images

    SVG can be set as a background image just like PNG, JPG, or whatever other graphics format. At this point, you’ve sort of given up on being able to change the fill . One possibility, which I’d argue isn’t a particularly good one, is to have two versions of every icon, in the respective colors, and swap between them:

    I don’t blame you if you’d rather not swap sources, so another possibility is to get gnarly with filters.

    Trying to finagle the right filters to get the color right is tricky stuff. Fortunately, Barrett Sonntag made a tool to calculate the filters for you! Turning black to red ends up a whacky combination like this: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%); .

    SVG also has object , which is kinda neat in that it had a built-in fallback back in the day — although browser support is so good these days, I honestly have never used it. But if you’re using it, you would probably have to use this filter technique to swap color on hover.

    Use a mask instead of a background image

    This way, the SVG is still in charge of essentially drawing the shape, but the color comes from the background-color (or image! or gradient!) behind it rather than the SVG itself.

    SVG background images as data URLs

    This doesn’t change that much from above, but it does open up one interesting possibility: Using a variable for the internal fills. Here that is with Sass keeping the URLs as variables:

    Источник