svg 圖標顏色無法修改的問題


 

現象:iconfont安裝后的圖標,是通過symbol引用方式,有的圖標不能通過color修改顏色的解決辦法,有的又可以。

<svg class="icon" aria-hidden="true" style="color:red;">
     <use xlink:href="#icon-PDF"></use>
</svg>

原因:

當從阿里圖庫中圖標被添加至項目,如果編輯過項目圖標的顏色或者圖標本身是有顏色的,那么在通過symbol獲取圖標時會在svg的path中增加fill屬性,導致無法更改顏色,如果需要動態修改顏色,需要從新添加該圖標(本身圖標無色),獲取在symbol的js文件中程序刪除fill屬性。

解決辦法: 

1. 下載Js文件后,用Notepad++打開,然后用正則表達式查找:fill="#......" ,替換。

2. iconfont.cn上,全選項目中的文件,應用批量操作-->批量去色

引自:https://www.cnblogs.com/jopny/p/9454785.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM