html - 使用 CSS 添加带有颜色叠加的 SVG

Question

我有一个 SVG 格式的图标列表，我正在 Web 应用程序上使用它。

图标前景色是黑色的，我想在鼠标悬停时使用 CSS 将此颜色更改为白色。使用 CSS 执行此操作的最简单方法是什么(如果可能？)

HTML 标记如下:

<img class="icon" src="user.svg">

CSS

.icon {
width: 200px;
height: auto;
}

.icon:hover {
fill: #fff; /* this doesn't work */
}

JSFiddle

Answer 1

.icon {
width: 200px;
height: auto;
}

.icon:hover {
filter: invert(100%);
}

.teste {
background-color: lightblue;
}

<div class="teste">
    <img class="icon" src="https://image.flaticon.com/icons/svg/358/358269.svg">
</div>

悬停时只需添加

.icon:hover {
filter: invert(100%);
}