Question

我有一个SVG格式的图标列表，我在网络应用程序中使用它。

图标前景色为黑色，我想使用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

＆＃13;

.icon {
width: 200px;
height: auto;
}

.icon:hover {
filter: invert(100%);
}

.teste {
background-color: lightblue;
}

＆＃13;

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

＆＃13;

悬停时，只需添加

即可

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

Answer 2

鉴于您目前的设置，您是否可以执行以下操作？：

<强> HTML

<i class="icon icon-user"></i>

<强> CSS

.icon {
    background-image: url('your/svg/file.svg');
    background-repeat: no-repeat;
}

.icon-user {
    background-position: 50px 100px;
}

.icon-user:hover {
    color: red;
 }

因此，这里的想法是您将使用background标记的<i>属性来设置背景图像，作为整个.svg文件，然后使用background-position属性显示该.svg文件中的特定区域。在悬停时，<i>标记的颜色应根据color属性更改为指定的颜色。

使用CSS添加带颜色叠加的SVG

2 个答案: