svg - 如何用 svg 渐变插入色调？

Question

我想要一个具有从 hsl(0, 100%, 50%) 到 hsl(360, 100%, 50%) 渐变的 svg 形状，色调从 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 中有效，但如果它不能在任何地方都有效，请不要感到惊讶)