修改svg图标颜色方法

2024-06-30 17:20| 来源: 网络整理| 查看: 265

1. 直接修改svg文件中fill属性

2. 使用css修改svg图标的fill属性

仅对内联svg有效

3. 使用currentColor

只对html中内联的svg有效，包括symbol和use，对background中svg无效

修改svg文件中的fill属性为currentColor，在父级使用color改颜色，或者使用 css样式 svg {fill:red} 修改svg图标颜色

4. 使用css变量

同样只对内联的svg有效

在svg文件，修改fill和stroke为css变量，设置标签style中的css变量即可

5. 使用mask

对内联和背景图标均有效，推荐

.icon { color: red; background-color: currentColor; mask-image: url(icon.svg); }

6. 使用drop-shadow, 多重彩色影分身

移动图标位置，使得影分身覆盖原图标位置，只是覆盖位置，原图标也同时移走了，所以未覆盖原图标。

父元素overflow:hidden, 就只显示影分身了。

在老版chrome里，父元素overflow:hidden，影分身会同时隐藏，使用透明border占据位置，不隐藏，但是不可见，这样可解决

在新版chrome里，父元素overflow:hidden，影分身不会隐藏，透明border已经不需要了

但是在safari里，父元素overflow:hidden，影分身还是会隐藏

.icon > .icon { position: relative; left: -20px; border-right: 20px solid transparent; filter: drop-shadow(red 20px 0px); }

或者 (用绝对定位麻烦, img标签不妥)

7. 使用滤镜

简单的纯黑或纯白图标

/* 图标变黑色 */ .black { filter: brightness(0); } /* 图标变白色 */ .white { filter: brightness(100); }

其他颜色的图标也可以使用多个滤镜进行模拟，具体可参考图标变色为任意指定颜色

8. svg多色图标

使用css变量进行穿透，可以穿透use标签的shadow DOM

my-first-icon .icon-colors { --color-1: #c13127; --color-2: #ef5b49; --color-3: #cacaea; }

9. svg使用渐变色

只能使用svg定义的渐变色对象，不能使用css的渐变属性，写起来比较冗长，支持css变量

#gradient1 { --color1: #a770ef; --color2: #cf8bf3; --color3: #fdb99b; } svg { fill: url(#gradient1); }

10. svg图标变色使用background-blend-mode

详细 mix-blend-mode和background-blend-mode应用场景

11. svg图标转义

svg图标转换为base64，体积会比较大，直接在DataURI中使用反而提交比较小，而且还能实时的修改颜色。但是不能内联在DataURI中，需要进行转义，解决方法如下

function encodeSvg(svg: string) { return svg.replace('

【本文地址】

公司简介

联系我们