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渐变能正常显示了。