如何使用SVG渐变插值色相？

Question

我想要一个从hsl(0, 100%, 50%)到的渐变形状的svg形状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>

虽然看起来很丑。

有更好的方法吗？

Answer 1

SVG 中的颜色插值是使用 sRGB 颜色空间完成的（尽管您应该能够指定 LinearRGB，但我认为它没有得到很好的支持），因此您无法执行您想要的操作 - 那些 HSL 颜色在它们之前转换为 sRGB是插值的。

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

Answer 2

渐变每 60 度停止一次！

由于hsl 和 rgb 相互作用，您可以通过在色调上每 60 度设置渐变停止点来获得最佳效果。添加更多停靠点或在其他地方，会使结果变得更糟。

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

<svg width=100%>
  <rect width=100%           height="1em" fill="url(#hslGradient)"/>
  <rect width=100% y="1.5em" height="1em" fill="url(#nameGradient)"/>
  <rect width=100% y="3em"   height="1em" fill="url(#rgbGradient)"/>
  <rect width=100% y="4.5em" height="1em" fill="url(#hexGradient)"/>
  <defs>
    <linearGradient id="hslGradient">
      <stop offset=0%   stop-color="hsl(  0, 100%, 50%)" />
      <stop offset=16%  stop-color="hsl( 60, 100%, 50%)" />
      <stop offset=33%  stop-color="hsl(120, 100%, 50%)" />
      <stop offset=50%  stop-color="hsl(180, 100%, 50%)" />
      <stop offset=66%  stop-color="hsl(240, 100%, 50%)" />
      <stop offset=83%  stop-color="hsl(300, 100%, 50%)" />
      <stop offset=100% stop-color="hsl(360, 100%, 50%)" />
    </linearGradient>
    <linearGradient id="nameGradient">
      <stop offset=0%   stop-color="red"    />
      <stop offset=16%  stop-color="yellow" />
      <stop offset=33%  stop-color="lime"   />
      <stop offset=50%  stop-color="cyan"   />
      <stop offset=66%  stop-color="blue"   />
      <stop offset=83%  stop-color="magenta"/>
      <stop offset=100% stop-color="red"    />
    </linearGradient>
    <linearGradient id=rgbGradient>
      <stop offset=0%   stop-color="rgb(255,  0,  0)"/>
      <stop offset=16%  stop-color="rgb(255,255,  0)"/>
      <stop offset=33%  stop-color="rgb(  0,255,  0)"/>
      <stop offset=50%  stop-color="rgb(  0,255,255)"/>
      <stop offset=66%  stop-color="rgb(  0,  0,255)"/>
      <stop offset=83%  stop-color="rgb(255,  0,255)"/>
      <stop offset=100% stop-color="rgb(255,  0,  0)"/>
    </linearGradient>
  <linearGradient id=hexGradient>
      <stop offset=0%   stop-color="#f00"/>
      <stop offset=16%  stop-color="#ff0"/>
      <stop offset=33%  stop-color="#0f0"/>
      <stop offset=50%  stop-color="#0ff"/>
      <stop offset=66%  stop-color="#00f"/>
      <stop offset=83%  stop-color="#f0f"/>
      <stop offset=100% stop-color="#f00"/>
    </linearGradient>
  </defs>
</svg>

如果我们谈论网络，我个人会使用 css 渐变。

html {
  background: linear-gradient(to right,
    #f00,
    #ff0,
    #0f0,
    #0ff,
    #00f,
    #f0f,
    #f00)
}