@Nimbus1996

Изменить fill svg из спрайта при наведении на блок?

Ребят, проблема шо пипец.
Мне необходимо при наведении на карточку своеобразную изменять цвет svg. но svg не простая а целая картинка отрисованная, она очень обширная и вставлять её инлайн вообще не айс, я сделал спрайт из трёх таких картинок и вставил с помощью use, НО мне при наведении нужно изменить fill у path в этом svg и ничего не получается.
Подскажите как можно сделать, перерыл весь инет, всё перепробовал и ничего не получается.
6023960410304044509130.png
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
LenovoId
@LenovoId
I want, women not to get sick
С use есть проблемы - даже в современных браузерах так как shadow-root(closet)
Лучше вставить через object и навести то есть hover/mousemove
Или же в SVG подключить css file и javascript file и делать наведение hover или mousemove
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
fallus
@fallus
1. Вариант.
Если это действительно svg-спрайт, то желательно в нём удалить всякие fill и stroke атрибуты вовсе.
И задать их с помощью css.
Как мне кажется, обращаться стоит так:
svg > use{ fill: red }

2. В спрайте(или даже если это картинка <img src="mysvg.svg" />) значения атрибутов fill и stroke заменить на css-переменные.
fill="var(--myColor1)" stroke="var(--myColor2)"

Ну и менять их при наведении:
.myBlock{
--myColor1: red;
--myColor2: green
}

.myBlock:hover{
--myColor1: blue;
--myColor2: aqua
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
01 мар. 2021, в 09:29
1 руб./за проект
01 мар. 2021, в 09:20
50 руб./за проект