前言

在本地dev时并不会出现svg颜色异常问题,但是Prod mode以及部署后会出现相关svg图片只有黑色,今天调查解决了一下

解决方法

这个机制是依赖css3的 currentColor 的，如果不写 fill-rule:currentColor 的话，svg是没法自动继承颜色的，只有一个默认的黑色。

于是在svg def中将fill-rule改为currentColor,并把fill的颜色注释掉.

然后在调用该svg的components中

<style>
  svg{
    fill: #000 //the color you want
  }
</style>

还有相关的mdn的资料也对svg走线的上色有帮助