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>