如何用svg渐变插入色调？

Question

我想要一个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>

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

通过添加更多停靠点，我已经成功hack around：

<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

完整hsl渐变0 - 360

通过将停止颜色设置为10％，我得到一个接近图像的形状：

<svg height="100%" viewBox="0 0 100 20">
  <defs>
    <linearGradient id="Gradient2">
      <stop offset="0%" stop-color="hsl(0, 100%, 50%)" />
      <stop offset="10%" stop-color="hsl(36, 100%, 50%)" />
      <stop offset="20%" stop-color="hsl(72, 100%, 50%)" />
      <stop offset="30%" stop-color="hsl(108, 100%, 50%)" />
      <stop offset="40%" stop-color="hsl(144, 100%, 50%)" />
      <stop offset="50%" stop-color="hsl(180, 100%, 50%)" />
      <stop offset="60%" stop-color="hsl(252, 100%, 50%)" />
      <stop offset="70%" stop-color="hsl(236, 100%, 50%)" />
      <stop offset="80%" stop-color="hsl(288, 100%, 50%)" />
      <stop offset="90%" stop-color="hsl(324, 100%, 50%)" />
      <stop offset="100%" stop-color="hsl(360, 100%, 50%)" />
    </linearGradient>
  </defs>
  <line stroke-width="16" stroke-linecap="round" stroke="url(#Gradient2)" x1="10" y1="10" y2="10.1" x2="90" />
</svg>

如果你想看看1％的停止颜色是如何在Harry创建的小提琴： Fiddle

包括与10％止损的比较。

如果您认为有许多停止颜色，那么您可以使用javascript添加每个停止元素。但我认为手动添加它们通常是更好的方法。

Answer 3

梯度每60度停止一次！

由于hsl and rgb interact（）的效果，您可以通过在色相上每60度停止渐变来获得最佳效果。添加更多停靠点 其他地方，使结果更糟。

<svg width=100%>
  <defs>
    <linearGradient id=Gradient1>
      <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>
  </defs>
  <rect width=100% height=10em fill="url(#Gradient1)"/>
</svg>

也可以只使用颜色名称，而不必使用太多的浏览器支持。

<svg width=100%>
  <defs>
    <linearGradient id=Gradient1>
      <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>
  </defs>
  <rect width=100% height=10em fill="url(#Gradient1)"/>
</svg>

在CSS中，您也可以使用渐变和hex / rgb来做到这一点。

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

在这两种情况下，重要的是每60度，如果在每个停止点使用rgb，hex或hsl，结果应该相同。如果需要在整个色相上具有相同色度的渐变，请查看hcl和CIELAB。