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

我想要一个字体图标的替代品。所以我决定创建SVG图标。我在用咕噜和。一切正常。有使用Grunt Iconizr的我的输出SCSS文件：

首先

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

    %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颜色属性轻松完成。是否有任何方法可以更改由
背景图像：url（…）
附加的SVG的颜色？
您可以在悬停时添加
不透明度
值：

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

使用内联svg，您可以在svg文件的任何部分上放置一个类名，并更改该部分的颜色等。检查一下：但在这种情况下，我将无法创建我的“图标包”，只能通过向HTML元素添加CSS类来使用图标。您认为没有不同的解决方案吗？这是正确的，通过将SVG作为文件添加到CSS中，您将其作为文件使用，而不是作为代码使用。如果SVG是纯色，并且希望悬停状态是颜色阴影中的简单更改，则可以通过更改不透明度来模拟颜色更改。或者，由于您已经在创建“精灵包”，您可以在包中包含图标的“悬停状态”，并更改悬停上的背景位置以显示不同的图标。是的，这可能是一个解决方案。但不幸的是，默认情况下，我需要在页面上有一个两种颜色的图标。例如一些箭头。我可以在页眉处用白色，在页面的其余部分用黑色。我仍然认为在这种情况下，使用字体图标将是最好的解决方案，而不是使用SVG图标。当您将SVG用作图像时，您无法以任何方式更改图像的内容。如果使用图像，每个状态都需要一个图标。
.icon-arrow-down:hover { 
    opacity: 0.5;
}