1. Главная
  2. Форумы
  3. Техподдержка Drupal
  4. Решение проблем

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

Главные вкладки

Аватар пользователя VasyOK VasyOK 2 января 2020 в 0:28

Приветствую специалистов по верстке!

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

Попробовал сделать так:

.main-menu ul li a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-menu ul li a::before {
    width: 18px;
    height: 18px;
    content: '';
    background: #828282;
    display: block;
    mask-repeat: no-repeat;
    mask-position: center;
    margin: 0 0 3px 0;
}
.main-menu ul li a.active::before,
.main-menu ul li a:hover::before {
    background: var(--clr1);
}
.main-menu .reit a::before {
    mask-image: url('../images/main_menu/reit.svg');
}
.main-menu .orders a::before {
    mask-image: url('../images/main_menu/orders.svg');
}

Результат нормально работает только в Firefox:

В Crome плохо:

Сайт http://u14038.malleus.vps-private.net - верхнее меню.

Комментарии

Аватар пользователя VasyOK VasyOK 2 января 2020 в 0:53

Вот пока писал тему на форуме небольшое озарение пришло. Если использую "-webkit", начинает работать в Chrome:

.main-menu ul li a::before {
    width: 18px;
    height: 18px;
    content: '';
    background: #828282;
    display: block;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    margin: 0 0 3px 0;
}

.main-menu ul li a.active::before,
.main-menu ul li a:hover::before {
    background: var(--clr1);
}

.main-menu .reit a::before {
    mask-image: url('../images/main_menu/reit.svg');
    -webkit-mask-image: url('../images/main_menu/reit.svg');
}

Но в Edge не все гладко ("заказы, мастерам"):

mask-repeat: no-repeat; - не работает в Edge?

Оно то решаемо, если задать ширину и высоту для каждого псевдоэлемна, но код какой-то страшный получается. Может я что-то неправильно делаю?

Аватар пользователя VasyOK VasyOK 4 января 2020 в 17:09

Хорошо залил в fontello svg файлы. Полученный архив рапаковал в тему.

1. Прописал в info темы
stylesheets[all][] = fontello/css/picks.css
это файл с
.icon-orders:before { content: '\e807'; } /* '' */
этого достаточно?

2. svg картинки в макете - они не пиксель в пиксель одинаковые по ширине и высоте. А fontello предлагает задать размер шрифта. Что с этим делать?

3. Почему картинка в svg выглядит так:
http://u14038.malleus.vps-private.net/sites/all/themes/buildportal/image...

а на сайте http://u14038.malleus.vps-private.net/ так (?):

Аватар пользователя Sevix Sevix 4 января 2020 в 19:36

Попробуйте посмотреть в сторону конвертирования svg в css. Например:
https://www.npmjs.com/package/gulp-svg-css
Я лично именно этим пользуюсь. Работает на ура и для before/after, и для hovera. Код получается очищенный=сжатый, места занимает немного.
Не знаю, возможно и онлайн сервисы подобные есть.
Только ищите чтоб на выходе не base64 было, а именно svg. Тогда прямо в css и цвета подправить можно, например, для ховера.

А шрифты иконочные... Да, с ними удобно работать. Но давно отказался по причине, что их браузеры ломают всякий на свой лад.

Аватар пользователя VasyOK VasyOK 5 января 2020 в 0:15

Вообще-то именно по этой ссылке я и нашел как использовать свойство mask.
Там оно работает совместно с mask-size: cover и там ничего не говорится о префиксе -webkit. А про mask-repeat там вообще ничего.