使用 CSS 添加带有颜色覆盖的 SVG答案

【问题标题】：Add SVG with colour overlay using CSS使用 CSS 添加带有颜色覆盖的 SVG
【发布时间】：2017-05-16 03:23:02
【问题描述】：

我有一个 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

【问题讨论】：

你有一个图像，developer.mozilla.org/en/docs/Web/SVG/Element/svg

标签： html css svg

【解决方案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%);
}

【讨论】：

【解决方案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;
 }

所以这里的想法是，您将使用<i> 标记的background 属性设置背景图像，即整个.svg 文件，然后使用background-position 属性显示其中的特定区域.svg 文件。悬停时，<i> 标记的颜色应更改为基于color 属性的指定颜色。

【讨论】：