css改变svg图标的颜色

永远的WEB小白2026-06-11 12:52

CSS filter 滤镜调色（单色图标首选）CSS filter 滤镜调色（单色图标首选）

原理：把原始 SVG 做成纯黑色，用滤镜公式换算成任意十六进制色

方法一

html 复制代码

<style>
.img-icon {
  filter: invert(32%) sepia(91%) saturate(4241%) hue-rotate(338deg) brightness(97%) contrast(97%);
}
.img-icon:hover {
  filter: invert(52%) sepia(98%) saturate(412%) hue-rotate(84deg) brightness(93%) contrast(97%);
}	
</style>
<img class="img-icon" src="SVG图标.svg" alt="">

方法二

html 复制代码

<style>
.bg-icon {
  width:32px;height:32px;
  background: url(SVG图标.svg) no-repeat center;
  filter: invert(27%) sepia(96%) saturate(3512%) hue-rotate(200deg) brightness(94%) contrast(96%);
  background-size: 100%;
}
.bg-icon:hover {
  filter: invert(52%) sepia(98%) saturate(412%) hue-rotate(84deg) brightness(93%) contrast(97%);
}	
</style>
<div class="bg-icon"></div>