Figma导出的SVG在网页里不显示渐变
导出的SVG文件直接用Chrome打开是可以查看完整的图像,但是导入到HTML页面之后,图像里的渐变都没了,不管是做背景、使用img显示、直接嵌入在HTML里。渐变凭空消失了。
直接使用Chrome打开没问题,说明导出的SVG是兼容当前设备的。在HTML里无法显示,那么就可能HTML解析器出现了问题,导致SVG渲染不完整。
使用文本编辑器打开SVG文件查看源码,发现Figma导出的SVG里,元素的id命名使用了“:”做分隔符。比如定义渐变的linearGradient使用的id是paint0_linear_1124:4982,是这个导致了浏览器的HTML解析器无法通过id找到对应的渐变,导致渐变内容的丢失。
把“:”替换成“_”,保存,再打开网页就正常了。
HTML4版本里,ID命名只能使用字母、数字、“_”、“-”、“.”。到HTML5版本,取消了这些限制。在CSS里“:”是伪选择器,“.”是类选择器,给ID命名时应该避免使用这些,保持最好的兼容性,避免出现奇奇怪怪的BUG。
同是CSS保留的选择器。把“:”改成“.”,HTML解析器能识别出引用的元素,正确渲染出SVG内容,可能是HTML解析器保持兼容了HTML4规范。
2021.11.18更新:Figma 104.1版本已经修复ID这个问题了,导出的SVG渐变能正常显示了。