1

У меня есть черная svg фигура галочки. Ее ставлю фоном элемента в его :before. Нужно задать цвет этой галочки.

в нормальных браузерах - Firefox, Chromium

        background: #26e33c;
        mask: data-uri('image/svg+xml;charset=UTF-8', '../images/check0.svg') 0 0 / cover;
        mask-size: cover;

для IE и мобильных не работает оно.

Нашел такой ответ:

background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

можно ли сюда вместо ... вставить ../images/chack.svg ?

Или как можно сделать рабочим mask для IE и мобильеых?

вроде, должно работать в эдже, но нет:

-ms-filter:"progid:DXImageTransform.Microsoft.MaskFilter(color=#26448c)";
filter:progid:DXImageTransform.Microsoft.MaskFilter(color=#26448c);
1
  • а use нельзя применять ?
    – user33274
    18 мая 2018 в 13:13

1 ответ 1

2

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

Можно использовать как готовые шрифты(в примере FontAwesome 4.7), так и создавать свои собственные из отдельных svg-иконок(рекомендую https://icomoon.io/app/).

i:hover{
  color:red;
}
.pseudo:before{
  content:'\f00c';
  font-family:fontAwesome;
}
.pseudo:hover:before{
  color:red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<p>Стандартное включение иконок в разметку: <i class="fa fa-check"></i></p>
<p class="pseudo">С помощью псевдоэлементов</p>

10
  • 1
    для галочки даже font-awesome не нужен ...&#10004;
    – user33274
    18 мая 2018 в 13:21
  • @МаксимЛенский , таки да. Правда юникодовская галочка в разных браузерах по разному выглядит
    – zhurof
    18 мая 2018 в 13:23
  • у меня psd макет. там конкретная галочка, так что это не подходит
    – CodeGust
    18 мая 2018 в 13:25
  • отличие не сильное вроде бы
    – user33274
    18 мая 2018 в 13:25
  • 1
    @CodeGust , если уж так не хочется заморачиваться с иконочными шрифтами, можно создать две галочки разных цветов (например chack.svg и chack-red.svg) и при наведении менять background-image.
    – zhurof
    19 мая 2018 в 7:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.