問題:如下圖所示险耀,svg格式的獎牌圖形未顯示完整
定位:查看svg源碼恐锣,發(fā)現svg部分未顯示
原因:此前為了實現底部導航圖標的復用糕非,全局重置了path的fill屬性
解決:給底部導航圖標的樣式重置加作用域限制
結論:當遇到SVG圖形未顯示完整時立宜,請排查是否有樣式沖突
【用SVG格式的原因】
1藕各、不用做N倍切圖,自適應大小不模糊
2、圖標可以復用红伦,減小文件大小
3介陶、可以快速承接設計稿(設計師已經將設計稿共享在zplin上,相應的icon已經切好色建,直接下載可用)
【復用場景】頁面底部導航欄的選中與否,差別只有顏色不一樣
【復用技術方案】
1舌缤、用webpack的svg-sprite-loader將同一個文件夾下全部圖標的svg文件生成symbol元素箕戳,如下圖:
2、使用svg的use元素引用symbol元素
【復用與否的差別】
1国撵、需要的文件數
2陵吸、元素節(jié)點數