踩坑日记 svg 颜色更改失败

前言

最近入职了新公司,感觉还不错,还在熟悉阶段。

然后刚来两天就遇到一个小问题,封装的svg组件在处理某个svg图片时,无法修改svg图片的颜色。

类似这种:

鼠标移动上去之后

但是有一个svg图片,在svg组件中使用时,无法改变其svg图片颜色。

问题排查

在了解svg图片为什么无法改变颜色之前,我们先了解svg的使用环境。

这个svg图片是使用在一个封装的svg组件中,使用如下:

html 复制代码
<svg>
    <use xlink:href="SVG路径"></use>
</svg>

改变颜色的方法则是通过修改svg标签的style属性,如:

html 复制代码
<svg style={fill: color}>
    ...
</svg>

可以看到这里的样式是通过 style 直接注入的

那这个样式最后为什么会影响svg图片呢?又为什么某些svg图片不会被这些样式影响呢?

所以这里我们来看看异常的svg图片的代码是怎么样子的(无关紧要的内容已删除)。

首先svg是矢量图,浏览器通过svg图片中的路径信息,进行绘制,因此这里修改的实际上就是 fill 的值即填充的颜色

然后通过阅读代码,我们可以看到path 路径中,默认补充了fill的值,而我们通过style的方法修改fill 是影响path的父元素,通过继承父亲样式的方式,以期更改样式,如果默认补充了fill的值,那么就不会使用基础的内容。

因此无法影响svg颜色的原因就确定了,因为默认填充了颜色。

问题解决

原因排查清楚之后,问题解决也就轻而易举了。

我们可以将默认的fill填充提取到svg标签中,Path通过继承svg标签的fill来确定颜色,保证svg组件更改颜色的时候,可以更改到fill填充色。

改动大致如下:

总结

到此问题修复完毕,如果用户朋友们遇到svg无法改变颜色的情况,不妨尝试排查下这方面。

下次见!

相关推荐
江城开朗的豌豆几秒前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er5 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef068 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444011 分钟前
javaweb———html
前端·javascript·html
江城开朗的豌豆11 分钟前
玩转Vue Router:这些实用组件让你的SPA如虎添翼!
前端·javascript·vue.js
前端小巷子14 分钟前
Web开发中的文件下载
前端·javascript·面试
peakmain921 分钟前
Gradle 8.11.1的升级之旅
前端
一拳不是超人32 分钟前
PWA渐进式Web应用技术深度解析
前端·pwa
KaneLogger34 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
zwjapple7 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker