@Valmih

Как заменить заливку svg при hover?

Ни как не могу найти решение этой задачи! Svg задан через background-image, нужно менять цвет заливки при hover.

Есть 2 условия:

1) путь до svg должен быть только через background-image, вариант с через html, к сожалению не подходит.

2) Есть вариант - менять при hover на другое изображение, с нужным цветом заливки, но на блоке висит ссылка, и при клике вместо замены изображения появляется пустое место. Особенно заметно это на планшетах.

Прошу помочь всех, кто знает решение. Заранее спасибо!
  • Вопрос задан
  • 18913 просмотров
Решения вопроса 1
@Haoss
html-верстальщик
как правильно вставлять svg https://www.youtube.com/watch?v=S0OnkpIoEyQ
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
thisishappi
@thisishappi
Верстальщик=)
.svg:hover {
   fill: red;
}
Ответ написан
Комментировать
Ivanq
@Ivanq
Знаю php, js, html, css
1) Не получится. Через background-image - точно никак. Там даже анимаций нет.
2) Здесь можно поразмыслить.
.svg {
  background-image: url(svg1.svg);
}
.svg:hover {
  background-image: url(svg1_hover.svg);
}
Ответ написан
svistiboshka
@svistiboshka
живые веб интерфейсы
что-бы не было обращения на сервер при :hover можно сделать так
.svg {
background-image: url('data:image/svg+xml;utf8,<svg ...><path fill="#FFFBBB" ... /></path></svg>');
}
.svg:hover {
background-image: url('data:image/svg+xml;utf8,<svg ...><path fill="#DDDAAA" ... /></path></svg>');
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы