悬停时更改我的 SVG 图标的颜色答案

【问题标题】：Changing color of my SVG icons on hover悬停时更改我的 SVG 图标的颜色
【发布时间】：2014-08-20 20:36:03
【问题描述】：

我想要字体图标的替代品。所以我决定创建 SVG 图标。我正在使用 Grunt 和 https://github.com/jkphl/grunt-iconizr。一切正常。有我使用 Grunt Iconizr 输出的 SCSS 文件：

第一

    %icon {
        background-repeat: no-repeat;
    }

    .icon-arrow-down { 
        @extend %icon;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2223.90625%22%20viewBox%3D%220%200%20512%20510%22%20enable-background%3D%22new%200%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%20275.311l151.114-150.395%2054.886%2055.148-206%20205.02-206-205.02%2054.887-55.148z%22%2F%3E%3C%2Fsvg%3E");
    }

第二个输出文件，替代第一个文件：

    %icon {
        background-repeat: no-repeat;
    }

    .icon-arrow-down { 
        background-position: 0 0;
        @extend %icon;
        background-image: url(icons/icons.svg);
    }

我想在图标上创建悬停效果。有什么办法可以使用纯 CSS 解决方案实现悬停效果？我知道我可以使用 fill: #CCC; 属性来做到这一点……但前提是我的 HTML 代码中有 SVG。如果我使用字体图标，可以通过更改 CSS 颜色属性轻松完成。有什么办法可以改变background-image: url(...)附加的SVG颜色吗？

【问题讨论】：

使用内联 svg，您可以将类名放在 SVG 文件的任何部分，并仅更改其中一部分的颜色等。看看这个：css-tricks.com/using-svg
但在这种情况下，我将无法创建我的“图标包”并且只能通过将 CSS 类添加到 HTML 元素来使用图标。你认为没有不同的解决方案吗？
没错，通过将 SVG 添加为 CSS 中的文件，您将其用作文件，而不是代码。如果您的 SVG 是纯色，并且您希望悬停状态是颜色阴影的简单变化，则可以通过更改不透明度来假装颜色变化。或者，由于您已经在创建“精灵包”，您可以在包本身中包含图标的“悬停状态”，并更改悬停时的背景位置以显示不同的图标。

标签： css svg icons icon-fonts

【解决方案1】：

您可以在悬停时添加 opacity 值：

.icon-arrow-down:hover { 
    opacity: 0.5;
}

【讨论】：

是的，凯，这可能是一个解决方案。但不幸的是，默认情况下我需要在页面上有一个两种颜色的图标。例如一些箭头。我可以在页眉中使用白色，在页面的其余部分使用黑色。我仍然认为在这种情况下使用 font-icons 将是最好的解决方案，而不是使用 SVG 图标。
当您使用 SVG 作为图像时，您无法以任何方式更改图像的内容。因此，如果您使用图像，则每个州都需要一个图标。