如何使用svg渐变来插值色调？

我想要一个svg形状，其渐变从

hsl（0,100%，50%）

到

hsl（360,100%，50%）

，其中色调从0->360平滑地运行，以创建如下内容：

当我使用这些停止颜色进行渐变时：

<linearGradient id="Gradient1">
  <stop offset="0%" stop-color="hsl(0, 100%, 50%)"/>
  <stop offset="100%" stop-color="hsl(360, 100%, 50%)"/>
</linearGradient>

…它会产生一个完全红色的渐变

我通过添加更多的站点，稍微实现了这一点：

<linearGradient id="Gradient2">
  <stop offset="0%" stop-color="hsl(0, 100%, 50%)"/>
  <stop offset="1%" stop-color="hsl(3, 100%, 50%)"/>
  <stop offset="2%" stop-color="hsl(7, 100%, 50%)"/>
  <!-- Lots more -->
  <stop offset="98%" stop-color="hsl(352, 100%, 50%)"/>
  <stop offset="99%" stop-color="hsl(356, 100%, 50%)"/>
</linearGradient>

虽然它看起来很难看

有更好的方法吗？

全hsl梯度0-360 通过将停止颜色设置为10%，我得到了一个接近图像的形状：

---

SVG中的颜色插值是使用sRGB颜色空间完成的（虽然您应该能够指定linearRGB，但我认为它没有得到很好的支持），因此您不能做您想做的事情-这些HSL颜色在插值之前会转换为sRGB

（从技术上讲，SVG 1.1不支持HSL颜色-因此，虽然这在Chrome中有效，但如果它在任何地方都不起作用，请不要感到惊讶）

渐变每60度停止一次！ 正因为如此，您将通过在色调上每60度设置一次渐变停止来获得最佳效果。添加更多站点或在 在其他地方，这会使结果更糟

使用十六进制、html颜色名称、rgb或hsl定义渐变应该在web浏览器中创建相同的结果，因为所有这些最终都会转换为rgb。我不确定hsl svg在web浏览器之外的兼容性，为了安全起见，在大多数情况下我会坚持使用rgb或hex

---

是的，它与10站非常接近（这里是2站、10站和100站的比较——你失去了一点黄色的亮度，它似乎稍微向内移动）。我想知道是否有另一种方法可以本机进行插值，而不是依赖于在其他地方生成停止？