CSS 并在悬停时更改 SVG 图标

Question

这是我的 boostrap 菜单中的菜单项：

<li class="nav-item">
 <a href="#" class="icon"><span class="number">1</span>
   <img src="images/svg-icons/notifications-active.svg" alt="" />
 </a>
</li>

如您所见，有一个 SVG 图像被拉入，其中一个类附加为“图标”

这是我认为可以使其切换到不同颜色的 CSS：

<style media="screen">
.icon:hover {
    fill: #DA4567;
    }
</style>

知道我做错了什么还是不那样工作？

谢谢！

Answer 1

可以在这里找到一个提供 svg 颜色的好工具： https:
//codepen.io/sosuke/pen/Pjoqqp

社会保障体系

.nav-item {
    .icon {
        img {
            transition: all .2s ease-in-out;
        }

        &:hover,
        &:active,
        &:focus {
            img {
                filter: invert(37%) sepia(63%) saturate(1879%) hue-rotate(321deg) brightness(90%) contrast(89%);
                //filter: grayscale(100%);
            }
        }
    }
}

怎么运行的。
一篇很棒的文章开始：
https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/

基本上，您从深色基色（黑色）开始，并使用棕褐色滤镜引入颜色。然后搭配多个滤镜来尝试匹配十六进制颜色。在大多数情况下，这是一场势均力敌的比赛。

浏览器支持
现在几乎是最新的（> = IE10）：
https://caniuse.com/#search=svg%20filter