изменение цвета svg при наведении

#html #css #svg #svg_спрайт

Столкнулся с проблемой, связанной с изменением цвета иконок svg. Придерживался этой
инструкции.

Есть спрайт svg и отдельный стилевой файл для него:

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.icon-youtube {
  font-size:(13/10)*1rem;
  width:(15/13)*1em;
}


Подключаю на html через use:




оба варианта ниже не работают

.icon-youtube svg:hover { color: red; fill: red; }
.icon-youtube:hover { color: red; fill: red; } 


Проблема заключается в изменении цвета при наведении на иконку. Пробовал и fill,
и color. Ничего не работает.




а это точно svg? Подсказывают что это растор в обертке svg 
если это растор,то выходит цвет менять не получится,смысл тогда от такой svg
    

Ответы

Ответ 1

У SVG для покраски строки нужно применять атрибут - stroke:red;     


Ваше правило CSS должно быть таким :


    .icon-youtube svg:hover { stroke: red; fill: red; }
    .icon-youtube:hover { stroke: red; fill: red; }`    



Проверьте также и удалите, если они есть, атрибуты fill, stroke у
иконок в спрайте, так как они имеют наивысший приоритет.
Добавьте во внешнюю таблицу CSS принудительное наследование для
атрибутов SVG:   


    svg path {
    stroke:inherit;
    stroke-width:inherit;
    fill:inherit;
    }


Это всё относится, конечно к чистому SVG, а у вас действительно растровая иконка
встроенная векторным редактором в SVG.   

Выбирайте всегда SVG иконки, которые весят немного. Это верный признак того, что
они сделаны профессионально,- патчами, а не лепкой, градиентами, маркерами в векторных
редакторах.   

Один из полезных ресурсов для выбора SVG иконок

Выше были теория, но практика всегда интересней?  

Скачал две иконки svg c ресурса  iconmonstr: youtube - 1.8к; facebook - 0.3k  

1. Пример закрашивания одной иконки при наведении



svg path {
fill:inherit;
stroke:inherit;
stroke-width:inherit;
}
.icon-youtube:hover {
fill:red;
}



 

2. Пример анимации закрашивания иконок

Добавлен к первому примеру код второй иконки и анимация закрашивания при наведении: 

.icon-youtube{
transition: all .5s ease;
}

.icon-youtube:hover {
 fill:red;
}




svg path {
fill:inherit;
stroke:inherit;
stroke-width:inherit;

}

.icon-youtube{
transition: all .8s ease;
}

.icon-youtube:hover {
 fill:red;
}
 




  

UPD 

Ещё пример, как добавлять социальные иконки и изменять цвет при наведении


Ответ 2

Необходимо перенести код svg на html страницу и подключать в ксс через fill.

html:

 
css
.button-futter:hover path,
.button-futter:focus path{
    fill: #000000;


Ответ 3

Надо поменять цвет по ховеру на родителе иконки:

a.social__link
  svg.icon

.social__link {
  color: red;
  &:hover {
    color: green;
  }
}


Ответ 4

Добавьте :hover

svg:hover * { 
    fill: red;
}


Ответ 5

Если по инструкции, то нужно через color 



.icon {
	&.icon-youtube {
		color:red;
	}
}