踩坑日记 svg 颜色更改失败

前言

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

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

类似这种：

鼠标移动上去之后

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

问题排查

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

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

<svg>
    <use xlink:href="SVG路径"></use>
</svg>

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

<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无法改变颜色的情况，不妨尝试排查下这方面。

下次见！