Svelte each循环中linear gradient不生效问题求助

我在使用Svelte制作SVG弦图时遇到问题：21条弦路径需要分别从7种颜色中分配专属渐变，通过#each循环已经正确设置了linearGradient的颜色stop，但路径始终无法获取对应的渐变信息，尝试过利用索引更新引用等方法也没解决。

原代码如下：

{#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>
{/each}

核心问题及解决方法 #

• 重复ID冲突：SVG中元素ID必须唯一，原代码里所有linearGradient的id都是gradient，导致所有路径都引用了同一个渐变（通常是最后一个渲染的）。修改方式是给每个渐变添加唯一ID，比如结合循环索引：

  <linearGradient id={`gradient-${i}`} gradientTransform="rotate(90)">
  

  对应的路径fill属性也要同步修改：

  fill={`url('#gradient-${i}')`}
  

• 位置错误：是SVG的定义容器，应该放在SVG根节点下而非循环内部，重复创建不符合规范且无意义。把移到循环外，只在内部循环创建linearGradient：

修改后的完整代码示例：

<svg>
  <defs>
    {#each ribbons as ribbon, i}
      <linearGradient id={`gradient-${i}`} gradientTransform="rotate(90)">
        <stop offset="5%" stop-color={colors[ribbon.source.index]} />
        <stop offset="95%" stop-color={colors[ribbon.target.index]} />
      </linearGradient>
    {/each}
  </defs>

  {#each ribbons as ribbon, i}
    <path
      d={ribbon.path}
      fill={`url('#gradient-${i}')`}
      fill-opacity={0.7}
    />
  {/each}
</svg>

额外建议 #

如果渐变的旋转角度需要根据弦的方向动态调整，可以基于ribbon的源和目标位置计算gradientTransform，而不是固定rotate(90)，这样渐变方向会更贴合弦的走向。

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