Chrome下JS Canvas渲染Figma导出SVG线性渐变异常求解

问题根因 #

这个是Chrome浏览器独有的SVG解析兼容问题，核心触发点是Figma导出的线性渐变节点下的<stop>标签缺失显式offset属性，且Chrome在CanvasRenderingContext2D.drawImage()的SVG渲染链路中，对该场景的容错处理远差于Safari、Firefox等浏览器。

对比两份导出代码可以明确差异：

• Figma导出的第一个渐变stop未声明offset="0"，虽然SVG规范默认首stop的offset值为0，但Chrome的Canvas渲染逻辑无法识别该隐式值，直接判定渐变格式非法，导致整个关联元素不渲染
• Inkscape导出的所有stop均显式声明了offset值，符合Chrome的解析要求

可落地修复方案 #

方案1：批量修正已有SVG文件 #

直接修改Figma导出的SVG代码，补全所有渐变节点下stop的offset属性即可：

<defs>
<linearGradient id="paint0_linear_338:2881" x1="400" y1="0" x2="400" y2="800" gradientUnits="userSpaceOnUse">
<!-- 补全offset="0"即可解决核心问题 -->
<stop offset="0" stop-color="#99CCFF" stop-opacity="0.6"/>
<stop offset="0.864583" stop-color="#87C3FF" stop-opacity="0.1"/>
</linearGradient>
<clipPath id="clip0_338:2881">
<rect width="800" height="800" fill="white"/>
</clipPath>
</defs>

如果有大量SVG需要处理，可以加一步正则替换：匹配所有没有offset属性的<stop>标签，按顺序在首项补offset="0"，末项补offset="1"。

方案2：调整Figma导出配置，从源头避免问题 #

导出SVG时勾选「使用普通ID」选项，避免生成带冒号的特殊ID，同时可以搭配SVGO工具做导出后自动处理，配置规则强制给所有stop节点补全offset属性。

方案3：前端代码层兼容（无需修改SVG源文件） #

如果不方便修改SVG资源，可以在加载SVG的流程中加一层预处理：

1. 用DOMParser把请求到的SVG文本转成DOM对象
2. 遍历所有<linearGradient>、<radialGradient>节点下的<stop>子节点
3. 检查节点是否存在offset属性，不存在则按顺序补全对应值
4. 把处理后的DOM转回DataURL或者Blob对象，再创建Image实例加载后绘制到Canvas即可

内容的提问来源于stack exchange，提问作者Philip Grabenhorst