Chrome 上的 JavaScript Canvas SVG 線性漸變渲染

Question

所以這個問題的細節有點遲鈍。 這是我的團隊正在嘗試做的事情……我們正在使用 Figma 來創建 SVG。 這些 SVG 相對簡單，但我們使用它們在應用程序主體中創建動畫。 我們的應用程序基於 HTML5 Canvas。 加載圖像文件后，將使用CanvasRenderingContext2D.drawImage()方法將其繪制在 Canvas 上。 這是踢球者。 有些 SVG 只是沒有出現。 其他人確實出現。 有些可能會部分出現。 這是將我帶到 StackOverflow 的問題（盡管希望我很快能夠為它提供答案）。 一些 SVG 使用 Figma 生成的線性漸變，但這些線性漸變根本不會在 JS Canvas 中呈現。 更糟糕的是，這個問題只發生在 Chrome 上！ 我在 Safari 中嘗試了相同的過程，它確實有效。

所以，事情是這樣的：有沒有人遇到過這種帶有線性漸變的瀏覽器特定類型的 SVG 問題，如果有，你是如何解決的？

我懷疑答案在於 linearGradient 標簽的格式。 這是同一個文件的兩個版本，一個來自 Figma，一個來自 Inkscape（一個來自 Inkscape 作品）。

無花果

<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>

墨景

<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)版本94.0.4606.81 (Official Build) (arm64) ）