問題：如下圖所示，svg格式的獎牌圖形未顯示完整
有誤的樣式
設計原稿
定位：查看svg源碼，發現svg部分未顯示
svg代碼
原因：此前為了實現底部導航圖標的復用，全局重置了path的fill屬性
全局重置
解決：給底部導航圖標的樣式重置加作用域限制
加了作用域限制的樣式重置
結論：當遇到SVG圖形未顯示完整時，請排查是否有樣式沖突
【用SVG格式的原因】
1、不用做N倍切圖，自適應大小不模糊
2、圖標可以復用，減小文件大小
3、可以快速承接設計稿（設計師已經將設計稿共享在zplin上，相應的icon已經切好，直接下載可用）
【復用場景】頁面底部導航欄的選中與否，差別只有顏色不一樣
底部導航欄
【復用技術方案】
1、用webpack的svg-sprite-loader將同一個文件夾下全部圖標的svg文件生成symbol元素，如下圖：
經svg-sprite-loader生成的symbols
2、使用svg的use元素引用symbol元素
使用use引用symbol
CSS代碼
最終效果
【復用與否的差別】
1、需要的文件數
未復用
復用后
2、元素節點數
未復用
復用后
