"在悬停或活动时更改 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;
}