样式冲突造成svg图标显⽰不完整问题：如下图所⽰，svg格式的奖牌图形未显⽰完整
有误的样式
设计原稿
定位：查看svg源码，发现svg部分未显⽰
svg代码
原因：此前为了实现底部导航图标的复⽤，全局重置了path的fill属性
全局重置
解决：给底部导航图标的样式重置加作⽤域限制
svg图形加了作⽤域限制的样式重置
结论：当遇到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、元素节点数
未复⽤
复⽤后

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。