Как сделать маску цвета для svg?

Question

[Pavlo Marchenko]

Всем привет!
есть сайт. Внизу слайдер с свгшками, как сделать чтобы на них была маска(например красный цвет), а при ховере свг принимала бы свои цвета. Если кто делал подобное, буду рад ответу.

Answer 1

[Игорь]

На тему svg

g, polygon, path {
    fill: red !important;
}

Но лучше немного переверстать и сделать правильно
<div class="icon icon-red"></div>

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

.icon:hover {
    background-color: currentColor;
}

Для png юзай
https://developer.mozilla.org/en-US/docs/Web/CSS/m...

Ну и конечно же привет вебдизайн мастеру:)

Answer 2

[Stalker_RED]

Так? https://jsfiddle.net/Stalk/4xv4pk8j/1/

Comments

[Pavlo Marchenko]

нет, мне нужно сделать маску

[Stalker_RED]

Pavel Marchenko, опишите, что такое маска. Чем она отличается от того, что я линканул.