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

Question

[Valmih]

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

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

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

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

Прошу помочь всех, кто знает решение. Заранее спасибо!

Answer 1

[Дмитрий Христоев]

как правильно вставлять svg https://www.youtube.com/watch?v=S0OnkpIoEyQ

Comments

[Valmih]

Большое спасибо!

Answer 2

[Сергей Софьичев]

.svg:hover {
   fill: red;
}

Answer 3

[Ivanq]

1) Не получится. Через background-image - точно никак. Там даже анимаций нет.
2) Здесь можно поразмыслить.

.svg {
  background-image: url(svg1.svg);
}
.svg:hover {
  background-image: url(svg1_hover.svg);
}

Comments

[Valmih]

2) Точно так сделал, результат описан выше.

[Ivanq]

Valmih: Тогда только через HTML, к сожалению. А чем он <use> не подошел?

[Сергей Наломенко]

Valmih: Чтобы починить при клике/тапе, попробуйте прописать состояние не только для дефолтного состояния и для hover, а еще и для active.
Что-то вроде этого:
.svg, .svg:active { ... }

[Valmih]

Ivanq: Ок, спасибо и на том!

[Valmih]

Сергей Наломенко: Спасибо, попробую!

Answer 4

[Андрей]

что-бы не было обращения на сервер при :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>');
}