动态修改svg的颜色，svg做背景色时候修改颜色

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;
      }