SVG Hover上的颜色变化效果

Question

svg 有点棘手。 我有一些带有 svg 代码的社交图标，当我尝试在 hover 效果上更改颜色时，它不想更改颜色。 我的 svg 代码看起来像这样。

<svg aria-hidden="true" width="30px" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
  <path class="social-icon contact-icon" d="M19.9,2H4.1C3,2,2,3,2,4.1v15.7C2,21,3,22,4.1,22h6.1v-6.8H7.5V12h2.8V9.6c0-2.8,1.7-4.3,4.2-4.3c1.2,0,2.5,0.2,2.5,0.2v2.7
    h-1.4c-1.4,0-1.8,0.9-1.8,1.7V12h3.1l-0.5,3.2h-2.6V22h6.1c1.2,0,2.1-1,2.1-2.1V4.1C22,3,21,2,19.9,2z" />
</svg>

Answer 1

当您像我一样在 svg 标签内有路径时，您需要指明路径以使其更改颜色。

所以解决我的问题的 css 是：

svg:hover .social-icon {
       fill: #color
}

Answer 2

 svg:hover{fill: red}

 <svg aria-hidden="true" width="30px" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path class="social-icon contact-icon" d="M19.9,2H4.1C3,2,2,3,2,4.1v15.7C2,21,3,22,4.1,22h6.1v-6.8H7.5V12h2.8V9.6c0-2.8,1.7-4.3,4.2-4.3c1.2,0,2.5,0.2,2.5,0.2v2.7 h-1.4c-1.4,0-1.8,0.9-1.8,1.7V12h3.1l-0.5,3.2h-2.6V22h6.1c1.2,0,2.1-1,2.1-2.1V4.1C22,3,21,2,19.9,2z" /> </svg>