图标svg不变色

小知识 04-27 13:52

在使用vue和element UI开发时,使用自定义的ICO图标放到src/icons/svg目录,在引用定义了样式 item:hover {color:#fff;background:#999}时发现,颜色还是不变。在做图标的时候保存都是按正常操作来的。后面查阅了相关文档后才发现。SVG图标文件有一个fill属性。

svg不变色解决方法

使用记事本或其它文本编辑工具,会发现svg文件是一些文本指令,打开svg文件后,找到包含 fill="" 的内容如 fill="#0000ff",删除这一段,完美解决svg图标不变色问题。

SVG fill 属性

SVG形状的fill定义了其轮廓内的形状的颜色。换句话说,SVG形状的表面。填充是您可以为任何SVG形状设置的基本SVG CSS属性之一。
实例:<svg width="500" height="100"><circle cx="50" cy="50" r="25" style="fill:#0000ff;" /></svg>

SVG stroke属性

stroke属性定义了给定图形元素的外轮廓的颜色。它的默认值是none。
实例:<svg width="500" height="100"><circle cx="50" cy="50" r="25" style="stroke: #000066; fill: #3333ff;" /></svg>