问题：如下图所示，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、元素节点数
未复用
复用后
网友评论