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

Question

[sergey1989]

В футере сайте вставлены SVG картинки (иконки) соц. сетей. Как сделать изменение fill и stroke при наведении?

Answer 1

[Петр]

Через css и если svg у вас вставлен inline.
Задаете цвет:

svg:hover{
 color: red;
}

Есть тонкость, нельзя через css поменять цвет, если в svg он уже задан, через атрибут

Comments

[sergey1989]

Вставлена как обычная картинка (inline), но не работает этот метод.

[sergey1989]

<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="26px" height="26px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 188 188"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:#7f7f7f;fill-rule:nonzero}
    .fil1 {fill:#3d3d3d;fill-rule:nonzero}
   ]]>
  </style>
 </defs>
 <g id="Слой_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <g id="_92164736">
   <polygon id="_92164808" class="fil0" points="654.986,-969.151 508.583,-969.151 508.583,-822.748 654.986,-822.748 "/>
   <path id="_92164760" class="fil1" d="M561.313 -911.123l9.2145 0 0 -4.1803 0 -4.0953 0 -0.6828c0,-3.9418 0.1023,-10.0335 2.9688,-13.8045 3.0207,-3.9933 7.167,-6.7059 14.2996,-6.7059 11.6202,0 16.5182,1.6548 16.5182,1.6548l-2.3039 13.6513c0,0 -3.8389,-1.1094 -7.4228,-1.1094 -3.5831,0 -6.7915,1.2797 -6.7915,4.8632l0 1.4505 0 4.7781 0 4.1803 14.692 0 -1.0242 13.3267 -13.6678 0 0 46.3114 -17.2684 0 0 -46.3114 -9.2145 0 0 -13.3267z"/>
  </g>
  <g id="_92164568">
   <polygon id="_92165408" class="fil0" points="188.592,0.3458 0.592,0.3458 0.592,188.346 188.592,188.346 "/>
   <path id="_92164520" class="fil1" d="M68.3046 74.862l11.8326 0 0 -5.3681 0 -5.2589 0 -0.8767c0,-5.0619 0.1314,-12.8843 3.8124,-17.7269 3.8789,-5.1279 9.2033,-8.6111 18.3625,-8.6111 14.9218,0 21.2114,2.1249 21.2114,2.1249l-2.9585 17.53c0,0 -4.9295,-1.4246 -9.5318,-1.4246 -4.6011,0 -8.7211,1.6434 -8.7211,6.2449l0 1.8628 0 6.1356 0 5.3681 18.8664 0 -1.3152 17.1132 -17.5512 0 0 59.4698 -22.1749 0 0 -59.4698 -11.8326 0 0 -17.1132z"/>
  </g>
 </g>
</svg>

[Петр]

sergey1989: Работает https://jsfiddle.net/7wo1tyv9/

[sergey1989]

Петр: У меня картинка вставлена по другому

[sergey1989]

Пробовал прописывать в самом svg файле, но так же не работает.

[Петр]

sergey1989: Я вам пример прислал. И в условии указал, что нужно инлайн вставлять svg, а у вас через ссылку на файл. Так работать не будет.

[Петр]

sergey1989: Пример того как сделать и inline и много повторов на картинку https://jsfiddle.net/7wo1tyv9/1/