問題原因：該部分svg圖標帶有fill屬性管挟，不能直接通過css 修改fill屬性退渗。
解決思路：一、移除默認顏色(去色操作)走诞；二、利用CSS3濾鏡filter中的屬性drop-shadow蛤高。
思路一：移除默認顏色(去色操作)
- 用編輯器打開.svg文件蚣旱，搜索fill="#xxx" ，刪除后即可通過css進行修改戴陡。
- 或者將如下代碼刪除即可塞绿。
<defs>
<style>
.cls-1 {
fill: #xxx;
}
</style>
</defs>
- 在iconfont.cn上，選中項目中的文件恤批，應用批量操作 -> 批量去色位隶。
思路二：通過CSS3濾鏡filter中的屬性drop-shadow改變svg的顏色。
// 通過img引入的svg文件开皿。
// 此時css對svg文件無法生效涧黄，要用到CSS3濾鏡filter中的drop-shadow，通過生產一個可指定顏色的陰影放置于svg的位置赋荆，并將原始svg移出視線
<img src="img/success.svg">
img{
position: relative;
left: -80px;
filter: drop-shadow(#fff 80px 0); // 投影顏色
}
svg {
fill: currentColor; //currentColor為css變量笋妥，自動讀取當前元素顏色
}
drop-shadow相關：
要使用標準的 css3 實現(xiàn)某元素的投影效果，有兩個方法窄潭，第一個就是使用常見的 box-shadow 春宣，第二個就是使用 css3 的 filter 陰影濾鏡 drop-shadow。
- filter 中的 drop-shadow 與 box-shadow 有同樣的參數(shù)值，但表現(xiàn)效果有差異月帝。drop-shadow沒有內陰影效果躏惋；drop-shadow不能陰影疊加。
- drop-shadow濾鏡可通過給元素或圖片非透明區(qū)域添加投影改變png小圖片顏色嚷辅。
原理如下：
對于背景透明的 png 小圖片而言簿姨，如果我們施加一個不帶模糊的投影，等同于生成了另外一個顏色的小圖片簸搞。
我們把原始圖片隱藏在容器外面扁位，投影圖片在容器中間，給人的感覺就是換了顏色的圖片趁俊。
然后域仇，來一個向左偏移，再來一個 overflow:hidden 原圖就隱藏掉了寺擂，只剩下一個投影圖片暇务。
Q&A
1、在 Chrome 瀏覽器下怔软，drop-shadow 有一個如下的呈現(xiàn)特性：
在 Chrome 瀏覽器下般卑，如果一個元素的主體部分，無論以何種方式爽雄，只要在頁面中不可見，其 drop-shadow 是不可見的沐鼠。
實體部分哪怕有 1 像素可見挚瘟，則 drop-shadow 完全可見。
所以：
- text-indent 負值隱藏原始圖饲梭，無投影乘盖，失敗
- clip 剪裁隱藏，無投影憔涉，失敗
- margin 負值隱藏原始圖订框，無投影，失敗
- left 負值隱藏原始圖兜叨，無投影穿扳，失敗
通通不行，實現(xiàn)遇到了巨大的阻礙国旷。
后來想矛物，如果我實體部分也在可視區(qū)域內，但是是透明的跪但，會怎樣呢（反正不會有投影出來）
于是履羞，就嘗試了經(jīng)常帶來意外驚喜的透明邊框，結果是可喜的
因此，下面這一個 css 聲明式千萬不能少的：
border-right: 20px solid transparent;
關于兼容性
IE13+ 支持忆首，Chrome 和 FireFox 瀏覽器支持爱榔，移動端 ios 支持，Android 4.4+ 支持糙及。也就是详幽，基本上，移動端現(xiàn)在可以使用這種技術了丁鹉。
另：
filter: grayscale(100%); //grayscale是一個將圖像轉換為灰度圖像的函數(shù)
