動態修改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;
      }