[踩坑]iconfont Symbol svg引入无法更改颜色
2023-03-14 22:55:42 时间
起因
最近公司组织架构调整(反正每次组织架构调整,领导就会下场。有一个idea或者有重构一下,先定一个月底上),被拉取一个项目组做新项目。这边图标现状:有些项目是font-face方式,有些用的阿里图标库,最近又在用腾讯图标库,有些甚至直接切图。
拥抱变化,迎接新技术吧。新项目这边使用svg方式引入图标。有一个地方的图标有两种状态:选中与非选中。按照以前我使用font-face的方式,设计只需要传一套,我这边改颜色,既然很多大佬(比如:张鑫旭)都说SVG Sprites比font-face高几层楼,那肯定也支持颜色更改吧。
这不我就刷到了张大佬的svg图标更改颜色,讲得通俗易懂,十分全面。
外部交涉
我试了所有方式,都没成功。好家伙,时间紧,任务重。也就不想纠结原因了,然后就想着找设计要两套吧。发生了以下对话:
设计:你怎么又改不了
我: 这边是用的svg那种呀,改不了
设计:自己下回多去试试
设计:别个都行,你不行
交涉ing....
我:巴拉巴拉(切图,也可以,图标库也可以,反正给我两套吧)
设计:懒得跟你说,我忙得很
我(内心):这人怎么能一下戳中人的怒气点了,我不忙?
复制代码
别个都行,你不行
,杀伤力确实大,我赶紧放下手上工作看看到底是不是自己不行了。上次font-face不能改颜色,好像是图底色问题。这次不会?
问题排查
找一个图标库
既然别个都行,你不行。我就怀疑是不是腾讯的图标库不得行,阿里的可以。所以在阿里图标库随便添加几个,下载项目。
对比两个图标的path
原因
所以还是svg生成的时候设置了fill属性,导致无法更改颜色。修改方法,需要设计那边上传单色图标。
相关文章
- 面向前端与未来标准的Node.js Web 框架再进化
- Debian 终于开始讨论非自由固件镜像了
- 即使对那些不知道 Markdown 的人来说,Marktext 也是一个绝佳的编辑器
- 在项目中用 TS 封装 axios ,一次封装团队受益
- 基于多模态信息融合的上肢康复训练评估系统
- 如何在 Linux 下使用 TC 优雅的实现网络限流
- Linux命令lsscsi详解
- 如何在 Ubuntu 20.04 LTS 上安装 Lighttpd、PHP 和 MariaDB
- 还不知道鸿蒙OS底层实现?老司机带你走进微内核
- 五个需要关注的 GNOME 43 功能
- 基于数字孪生的源网荷储多能互补智慧微网系统
- Bash 中的 ${} 和 $() 有什么区别
- 二进制在互联网业务开发中的精妙应用
- 前微软设计师吐槽Windows 11开始菜单广告太丑:文本错误 背景老式
- 如何在 Linux 上使用 Bash 自动化任务
- Docker 是怎么实现的?前端怎么用 Docker 做部署?
- CentOS 停服!我们有哪些顶流的国产操作系统
- Containerd ctr、crictl、nerdctl 客户端命令介绍与实战操作
- Kubernetes 网络排错骨灰级中文指南
- 如何列出连接到 Linux 系统的 USB 设备