结论
在我多番测试之后,才发现background-image使用svg,改变颜色根本做不了。
分析
当svg图片被使用成background-image,颜色的设置需要在svg内部才能生效。在外部CSS设置颜色样式,却是无效,这其实可以从CSS选择器得到解释,CSS选择器必须选择到DOM元素,而svg却被做成背景图,并没有以元素引入,所以在外部也就设不了颜色。
例子
CSS:i {
display: inline-block;
width: 100px;
height: 100px;
}.icon-del{
background-image: url(delete.svg);
}.st0{fill:#EC665E;}.st1{fill:#FFFFFF;}
HTML:
SVG:<?xml version="1.0" encoding="utf-8"?>
viewBox="-691 693 16 16" style="enable-background:new -691 693 16 16;" xml:space="preserve">
删除群成员Created with Sketch.