svg修改背景色可以使用fill属性来修改,但是我现在需要动态改变svg的颜色,例如我hover的时候
现在发现一种兼容性还不错的方法是css属性mask 类似于给路径填充上颜色,结合background就可以动态修改SVG的颜色,这时就行两幅图片一样的效果
上代码
.tree_wrap,.flat_wrap{ width: 16px; height: 16px; margin-right: 16px; background-color: #768893; // 这个色是会填充到路径上的颜色 } .tree_wrap:hover,.flat_wrap:hover{ cursor: pointer; background-color: #4598F0; } .tree_wrap{ mask: url('~static/dir/icon_tree.svg') no-repeat center center; //类似一个到路径上做一个遮罩, 用法和background属性一样 } .flat_wrap{ mask: url('~static/dir/icon_flat.svg') no-repeat center center; }