样式冲突造成svg图标显示不完整

问题：如下图所示，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、元素节点数

未复用

复用后