svg字体不能更改颜色

svg字体不能更改颜色

在阿里图标等字体图标库中下载svg字体,发现不能更改颜色,这是因为本身每一个svg文件中有一个path元素,里面有fill属性,fill属性规定了字体的颜色,所以在外部父元素设置color是无法改变其颜色。有三种方法可以改变svg字体。
如果要改为黑色
方法1:
直接修改svg path元素中 fill属性为#000。但是这样的缺点就是只要用到这个字体图标都是黑色。
svg字体不能更改颜色_第1张图片方法二:

fill="#fff"

改为

fill="currentColor"

就可以在父元素中设置color为#000

方法三:
全局加样式(有时有bug)

path { fill: inherit !important }

就可以在父元素中设置color为#000

你可能感兴趣的:(vue.js,svg)