Svelte 中的线性渐变每个循环不起作用

Question

我使用 Svelte 为 SVG 和弦图创建了 LinearGradient。每个和弦都应该有自己的渐变，从 7 种颜色中分配，总共 21 个单独的渐变分配给 21 条路径。检查 SVG 元素，我可以看到 Svelte #each 循环正确分配了 LinearGradient 内的颜色停止点。但是，路径没有获取更新的 LinearGradient 信息。我尝试过包括每次使用索引更新引用的方法，但似乎都不起作用。我已尽力根据 Stackoverflow 正确表述这个问题。非常感谢任何想法！

    {#each ribbons as ribbon, i}
<!-- ribbons with linear gradients -->
<defs>
  <linearGradient id={"gradient"} gradientTransform="rotate(90)">
    <stop offset="5%" stop-color={`${colors[ribbon.source.index]}`} />
    <stop offset="95%" stop-color={`${colors[ribbon.target.index]}`} />
  </linearGradient>
</defs>
<path
  d={ribbon.path}
  fill={"url('#gradient')"}
  fill-opacity={0.7}
>
</path>

{/每个}

Answer 1

它们可能都使用相同的渐变，因为您正在有效地渲染它

<defs>
  <linearGradient id="gradient">...</linearGradient>
</defs>
<path fill="url(#gradient)">...</path>
<defs>
  <linearGradient id="gradient">...</linearGradient>
</defs>
<path fill="url('#gradient')">...</path>

请注意，all渐变使用相同的id，并且all路径也指向相同的id。由于 ids 应该是唯一的，因此浏览器在

url(#gradient)

中查找 id 时将简单地忽略第二个定义。

您可以通过使 ids 唯一来解决此问题，也许使用索引或其他唯一标识符（如实际和弦）？

<linearGradient="gradient-{i}">
<path fill="url('#gradient-{i}')">