Как сделать закрашивание SVG иконки на hover?

#html #css #svg #hover #png

Есть две иконки: 1-ая (иконка сверху) стоит обычная, но при ховере она должна закрашиваться
(иконка снизу). Как такое реализовать, да еще и плавно, желательно?

P.S. Вариант только создать две png иконки и подменять при ховер ? 









    

Ответы

Ответ 1

Чтобы при ховере изменять цвет заливки, используйте свойство fill-opacity и, при
необходимости, stroke-opacity:



svg {
  display: block;
  width: 200px;
  height: 162px;
  margin: 40px auto;
}

path {
  fill-opacity: 0;
  fill: #f00;
  stroke: #f00;
  transition: all 0.4s linear;
}

svg:hover path {
  fill-opacity: 1;
  stroke-opacity: 0;
}



Ответ 2

Самый простой способ с двумя картинками друг над другом и изменением прозрачности
верхней:



div {
  width: 50px;
  height: 50px;
  background: url('https://i.stack.imgur.com/G1BtB.jpg') no-repeat -20px -14px;
  overflow: hidden;
}

.item:hover {
  opacity: 0;
  transition: all 500ms ease;
}

.item-wrapper {
  background-position: -20px -88px;
}