Chrome上的JavaScript Canvas SVG线性梯度渲染

Question

所以这个问题的细节有点迟钝。这是我的团队正在尝试做的事情……我们正在使用Figma创建svg。这些svg相对简单，但我们正在使用它们在应用程序的主体中创建动画。我们的应用程序基于HTML5 Canvas。一旦图像文件被加载，它将使用CanvasRenderingContext2D.drawImage()方法在画布上绘制。问题来了。有些svg就是没有出现。其他的也会出现。有些可能部分出现。这是让我想到StackOverflow的问题(虽然希望，我很快就能提供答案)。有些svg使用Figma生成的线性梯度，但这些线性梯度根本不会在JS画布中渲染。更糟糕的是，这个问题是只有发生在Chrome上!我在Safari中尝试了同样的过程，它确实有效。

所以，事情是这样的:有没有人遇到过这种特定于浏览器的SVG线性梯度问题，如果是这样，你是如何修复它的?

我怀疑答案在于linearGradient标签的格式。以下是同一文件的两个版本，一个来自Figma，一个来自Inkscape(来自Inkscape的版本有效)。

Figma

<defs>
<linearGradient id="paint0_linear_338:2881" x1="400" y1="0" x2="400" y2="800" gradientUnits="userSpaceOnUse">
<stop 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>

Inkscape

<defs
id="defs1024">
<linearGradient
inkscape:collect="always"
id="MAINGRAD">
<stop
style="stop-color:#99ccff;stop-opacity:0.60000002"
offset="0"
id="stop2574" />
<stop
style="stop-color:#87c3ff;stop-opacity:0.1"
offset="1"
id="stop2576" />
</linearGradient>
<clipPath
id="clip0_338:2881">
<rect
width="800"
height="800"
fill="white"
id="rect1021" />
</clipPath>
<linearGradient
inkscape:collect="always"
xlink:href="#MAINGRAD"
id="linearGradient3482"
gradientUnits="userSpaceOnUse"
x1="399.724"
y1="2.1855699e-08"
x2="399.724"
y2="800" />
</defs>

Answer 1

问题原来是相对简单的。Chrome中的Canvas似乎对包含某些格式的id很敏感。我使用以下工具来简化导出的Figma文件格式。

pip install scour
scour -i input.svg -o output.svg --shorten-ids

Scour只是解析文件并用最短的字符串替换每个唯一的ID。本例中，将paint0_linear_338:2881替换为a。这是解决问题所需的唯一更改，我怀疑问题出在冒号上。如果未来Chrome版本的更新能修复这个错误，我不会感到惊讶。

(当前Chrome版本:94.0.4606.81 (Official Build) (arm64))