7

Столкнулся с проблемой, связанной с изменением цвета иконок 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:

<svg class="icon  icon-youtube">
    <use xlink:href="../../img/sprite.svg#youtube"></use>
</svg>

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

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

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

<symbol viewBox="0 0 15 13" id="youtube" xmlns="http://www.w3.org/2000/svg"><title>Ресурс 3</title><g data-name="Слой 2"><image data-name="youtube.svg Изображение" width="15" height="13" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAANCAYAAAB2HjRBAAAACXBIWXMAAAsSAAALEgHS3X78AAAAZUlEQVQoU2O4pBF2Aog/APEUIFb5//8/A7GYAajhPxL+B8QbgNiOkEZsmpHxGSCOBmJWcjTD8BMgLgdiQXI0w/CXS2jhQopmGIaFixE5mmH4EzmaybKZLD+TFdokxzPJKYzstA0A0zPc1ilA8qgAAAAASUVORK5CYII="/></g></symbol></svg>

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

6 ответов 6

8

У 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;
}
<svg class="icon-youtube" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"> 
<path d="M4.652 0h1.44l.988 3.702.916-3.702h1.454l-1.665 5.505v3.757h-1.431v-3.757l-1.702-5.505zm6.594 2.373c-1.119 0-1.861.74-1.861 1.835v3.349c0 1.204.629 1.831 1.861 1.831 1.022 0 1.826-.683 1.826-1.831v-3.349c0-1.069-.797-1.835-1.826-1.835zm.531 5.127c0 .372-.19.646-.532.646-.351 0-.554-.287-.554-.646v-3.179c0-.374.172-.651.529-.651.39 0 .557.269.557.651v3.179zm4.729-5.07v5.186c-.155.194-.5.512-.747.512-.271 0-.338-.186-.338-.46v-5.238h-1.27v5.71c0 .675.206 1.22.887 1.22.384 0 .918-.2 1.468-.853v.754h1.27v-6.831h-1.27zm2.203 13.858c-.448 0-.541.315-.541.763v.659h1.069v-.66c.001-.44-.092-.762-.528-.762zm-4.703.04c-.084.043-.167.109-.25.198v4.055c.099.106.194.182.287.229.197.1.485.107.619-.067.07-.092.105-.241.105-.449v-3.359c0-.22-.043-.386-.129-.5-.147-.193-.42-.214-.632-.107zm4.827-5.195c-2.604-.177-11.066-.177-13.666 0-2.814.192-3.146 1.892-3.167 6.367.021 4.467.35 6.175 3.167 6.367 2.6.177 11.062.177 13.666 0 2.814-.192 3.146-1.893 3.167-6.367-.021-4.467-.35-6.175-3.167-6.367zm-12.324 10.686h-1.363v-7.54h-1.41v-1.28h4.182v1.28h-1.41v7.54zm4.846 0h-1.21v-.718c-.223.265-.455.467-.696.605-.652.374-1.547.365-1.547-.955v-5.438h1.209v4.988c0 .262.063.438.322.438.236 0 .564-.303.711-.487v-4.939h1.21v6.506zm4.657-1.348c0 .805-.301 1.431-1.106 1.431-.443 0-.812-.162-1.149-.583v.5h-1.221v-8.82h1.221v2.84c.273-.333.644-.608 1.076-.608.886 0 1.18.749 1.18 1.631v3.609zm4.471-1.752h-2.314v1.228c0 .488.042.91.528.91.511 0 .541-.344.541-.91v-.452h1.245v.489c0 1.253-.538 2.013-1.813 2.013-1.155 0-1.746-.842-1.746-2.013v-2.921c0-1.129.746-1.914 1.837-1.914 1.161 0 1.721.738 1.721 1.914v1.656z"/></svg>

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;
}
<svg class="icon-youtube" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"> 
<path d="M4.652 0h1.44l.988 3.702.916-3.702h1.454l-1.665 5.505v3.757h-1.431v-3.757l-1.702-5.505zm6.594 2.373c-1.119 0-1.861.74-1.861 1.835v3.349c0 1.204.629 1.831 1.861 1.831 1.022 0 1.826-.683 1.826-1.831v-3.349c0-1.069-.797-1.835-1.826-1.835zm.531 5.127c0 .372-.19.646-.532.646-.351 0-.554-.287-.554-.646v-3.179c0-.374.172-.651.529-.651.39 0 .557.269.557.651v3.179zm4.729-5.07v5.186c-.155.194-.5.512-.747.512-.271 0-.338-.186-.338-.46v-5.238h-1.27v5.71c0 .675.206 1.22.887 1.22.384 0 .918-.2 1.468-.853v.754h1.27v-6.831h-1.27zm2.203 13.858c-.448 0-.541.315-.541.763v.659h1.069v-.66c.001-.44-.092-.762-.528-.762zm-4.703.04c-.084.043-.167.109-.25.198v4.055c.099.106.194.182.287.229.197.1.485.107.619-.067.07-.092.105-.241.105-.449v-3.359c0-.22-.043-.386-.129-.5-.147-.193-.42-.214-.632-.107zm4.827-5.195c-2.604-.177-11.066-.177-13.666 0-2.814.192-3.146 1.892-3.167 6.367.021 4.467.35 6.175 3.167 6.367 2.6.177 11.062.177 13.666 0 2.814-.192 3.146-1.893 3.167-6.367-.021-4.467-.35-6.175-3.167-6.367zm-12.324 10.686h-1.363v-7.54h-1.41v-1.28h4.182v1.28h-1.41v7.54zm4.846 0h-1.21v-.718c-.223.265-.455.467-.696.605-.652.374-1.547.365-1.547-.955v-5.438h1.209v4.988c0 .262.063.438.322.438.236 0 .564-.303.711-.487v-4.939h1.21v6.506zm4.657-1.348c0 .805-.301 1.431-1.106 1.431-.443 0-.812-.162-1.149-.583v.5h-1.221v-8.82h1.221v2.84c.273-.333.644-.608 1.076-.608.886 0 1.18.749 1.18 1.631v3.609zm4.471-1.752h-2.314v1.228c0 .488.042.91.528.91.511 0 .541-.344.541-.91v-.452h1.245v.489c0 1.253-.538 2.013-1.813 2.013-1.155 0-1.746-.842-1.746-2.013v-2.921c0-1.129.746-1.914 1.837-1.914 1.161 0 1.721.738 1.721 1.914v1.656z"/>
</svg> 

<svg  class="icon-youtube" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-3 7h-1.924c-.615 0-1.076.252-1.076.889v1.111h3l-.238 3h-2.762v8h-3v-8h-2v-3h2v-1.923c0-2.022 1.064-3.077 3.461-3.077h2.539v3z"/></svg>

UPD

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

2

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

html:

<li><a class="button-futter" href="vk.com"><svg xmlns="http://www.w3.org/2000/svg" width="27" height="15" viewBox="бешеный код" fill="white"/></svg></a></li> 
css
.button-futter:hover path,
.button-futter:focus path{
    fill: #000000;
1

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

a.social__link
  svg.icon

.social__link {
  color: red;
  &:hover {
    color: green;
  }
}
2
  • По-моему вопрошающего звать Андрей=))
    – Arthur
    19 мая 2018 в 18:25
  • Добро пожаловать на ruSO. Не растраивайтесь из-за минуса, его выдал робот автоматом за то, что вы не сами поправили ответ.
    – 0xdb
    19 мая 2018 в 18:49
1

У меня никак не хотел меняться цвет path в SVG при использовании:

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

Нашёл альтернативное решение - менять стиль у класса для path. Т.е. кратко:

<a href="#" class="icon-youtube"><svg><path class="fil1".../></svg></a>
<style>
   .fil1 {fill: #fff}
  .icon-youtube:hover .fil1 {fill:#222}
</style>
0

Добавьте :hover

svg:hover * { 
    fill: red;
}
1
  • естественно я писал с ховером .icon-youtube:hover {} и .icon-youtube svg:hover {} что я уже только не пробовал 3 авг 2017 в 17:09
0

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

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

1
  • .icon-youtube svg:hover { color: red; fill: red; } .icon-youtube:hover { color: red; fill: red; } оба варианта не работают 3 авг 2017 в 17:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.