"在懸停或活動時更改 svg 顏色"

Question

我有一個使用 SVG 圖像的按鈕。

如何使填充顏色起作用？ 目前它不工作，並顯示默認的 SVG 顏色，即黑色。 請注意，我不能使用 jQuery，如果可能的話，我更喜歡將其保留為純 CSS\/HTML。 有沒有辦法只用 CSS\/HTML 改變 svg 填充顏色？

注意：下面，本地 SVG 文件替換為示例。

Answer 1

您不能選擇svg的類，因為它被稱為靜態圖像。 如果將svg代碼直接復制並粘貼到HTML中，則可以將其中的類與CSS一起使用，以像其他任何HTML元素一樣應用不同的屬性。

Answer 2

<svg class="suchicon" xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 0 24 24" width="30px" fill="#FACC2E"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>

.suchicon:active {
    fill: #585858;
}

.suchicon:hover {
    fill: #585858;
}