SVG иконки как backgound?

Всем привет. Необходима простая вещь. Вставлять svg иконку как background для использования в псевдоэлементах. Но нужно еще сделать смену цвета при наведении. Что-то не нашел информации как это можно сделать.
Спасибо.
P.s и может есть что-то для автоматизации сборки в спрайт и вставки как background и с позициями для Gulp.
  • Вопрос задан
  • 980 просмотров
Пригласить эксперта
Ответы на вопрос 2
@abberati
frontend-разработчик
Ваше спасение - gulp-svg-sprite.
Умеет собирать спрайты в четырёх разных режимах, режим для css-background тоже есть. Генерирует стили с уже установленными координатами иконки в спрайте. Для интерактивного svg background не подходит.
Я пользуюсь режимом symbol, всё работает примерно так:
  1. В svg-иконке в качестве цвета необходимого атрибута пишем currentColor (fill="currentColor" или stroke="currentColor", смотря что нужно красить).
  2. Собираем спрайт, рендерим его на странице. Элементы symbol не отображаются до вызова.
  3. В элементе, где нужна иконка, используем
    <svg>
        <use style="color: rebeccapurple" xlink:href="id_элемента_спрайта"></use>
    </svg>




Цвет из color наследуется внутри иконки везде, где используется currentColor. Можно развлекаться с CSS! (transition вам в помощь)

Минусы:
  • Активно управлять можно только одним цветом.
  • Это не background.


Мой gulp, там найдёте конфигурацию gulp-svg-sprite.
Пример использования (иконки соцсетей в правом верхнем углу).
Ответ написан
Комментировать
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Только что решал эту задачу. Вернее, пытался решить - невозможно это сделать. Есть костыли с фильтрами и масками, но они не везде поддерживаются, не всегда применимы и вообще костыли (статья).
Единственный вариант - инлайнить svg в документ, но это тоже нетривиальная задача (SO-1, SO-2, SO-3).
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы