svg上传到iconfont图标显示异常如何修复

发布网友发布时间：2024-09-28 23:35

共1个回答

热心网友时间：2024-10-05 11:15

在开发中，我曾分享过关于创建iconfont字体图标平台的经验，但在实践中，从codesign或蓝湖获取的svg图片上传到iconfont时，部分图标会出现显示问题。这主要源于svg格式的规范要求，即只使用path标签和fill填充属性，并推荐单一路径的设计。

以往遇到这类问题，我通常需要手动修改svg代码，有时甚至需要设计师重新提供切图，这过程既耗时又缺乏透明度，对团队合作造成困扰。认识到问题的本质后，我找到了解决方案，即通过自动化脚本来修复svg，使其适应字体图标的标准。

修复过程分为两步：首先，我利用张鑫旭的svg-to-path仓库，它能够将rect、circle等形状转换为path，大大简化了工作。其次，oslllo-svg-fixer开源库则帮助我们将stroke属性转换为fill，并合并多个path。但遇到拥有fill和stroke属性的path时，需要特别处理，将其复制为两个独立的path，并确保填充和描边颜色一致。

然而，有些svg文件包含背景矩形或mask元素，这可能导致图标显示异常。对于背景矩形，需要删除它以避免矩形色块；而mask属性的使用也需要仔细检查并适当删除或调整。