阿里巴巴iconfont svg图标不能更改颜色的解决方法

摘要:svg图标 带有 fill 属性,如果选择的是多色图标且下载到本地的话,默认是带有颜色的。修改的话,需要在编译器里面打开 svg 然后将 fill 属性删除即可,然后在需要的时候使用 css 进行设置

代码引用阿里巴巴iconfont svg图标时发现,设置颜色后,有一部分图标还是显示原始的颜色。原来这部分 svg图标带有 fill 属性,这种图标不能本地修改 fill 属性,需要在项目中移除默认颜色。

svg图标 带有 fill 属性,如果选择的是多色图标且下载到本地的话,默认是带有颜色的。

修改的话,需要在编译器里面打开 svg  然后将 fill 属性删除即可,然后在需要的时候使用 css 进行设置,当然有些图标没有 fill 属性的话是可以直接修改的。


使用 svg 图标:

<svg class="svg" aria-hidden="true">
    <use xlink:href="#icon-duide"></use>
</svg>
svg aria-hidden="true">
    <use xlink:href="#icon-duide"></use>
</svg>


css 修改颜色:

svg {
    height: 32px; width: 32px;
}
svg:last-of-type {
    fill: red;
}

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_8287