SVG background-image url — смена цвета

Admin CSS

Смена цвета для svg изображений, когда они вставлены через background-image: url.

Открываем в текстовом редакторе иконку svg, копируем оттуда текст и вставляем в редактор на этом сайте: yoksel.github.io/url-encoder/

В Ready for CSS получаем код готовый для вставки в css стили:

Меняем атрибут background-image: url на mask-image: url и webkit-mask-image: url и задаем также цвет. Стилистика приведена для SCSS:

.icon-add {
    background-color: black;

     mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg class='svg-img' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'.........");

    -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg class='svg-img' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'.........");

    &:hover {
        background-color: red;
    }
}

Можно без webkit-mask-image, если компилятор умеет самостоятельно добавлять этот атрибут.

Если надо отцентровать, то добавить:

mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;

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

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"SVG background-image url — смена цвета"