svg LinearGradient 并设置颜色空间插值

Question

在 svg 中，您可以定义线性渐变，在空间中的两种颜色之间进行插值。

编辑文档指出一些rgb空间，但不多。有什么解决办法吗？

我想知道是否有人能够尝试不同的渐变颜色插值。如果能够使用感知均匀的空间进行线性变换，那就太好了。

Answer 1

规范确实定义了 color-interpolation 属性，其值应可设置为

auto | sRGB | linearRGB | inherit

。
但目前只有 Firefox 123+ 支持

linearRGB

，其他浏览器仍然默认为

sRGB

值。 铬臭虫

但是可以通过

<filter>

校正伽玛值来解决此问题。

Holger Will 在前述错误报告中提供了这样一个过滤器：

<svg width="600" height="120" viewBox="0 0 600 120">

  <defs>
    <filter id="toLinearRGB" filterUnits="objectBoundingBox" x="0" y="0" width="1"
  height="1">
      <feComponentTransfer color-interpolation-filters="sRGB">
         <feFuncR type="gamma" amplitude="1" exponent="0.454545454545" offset="0"/>
         <feFuncG type="gamma" amplitude="1" exponent="0.454545454545" offset="0"/>
         <feFuncB type="gamma" amplitude="1" exponent="0.454545454545" offset="0"/>
         <feFuncA type="gamma" amplitude="1" exponent="0.454545454545" offset="0"/>
      </feComponentTransfer>
    </filter>
    <linearGradient id="gradient" gradientUnits="objectBoundingBox">
      <stop offset="0" stop-color="blue"/>
      <stop offset="1" stop-color="red"/>
    </linearGradient>
  </defs>

  <rect width="600" height="120" fill="gray"/>
  <rect x="50" y="10" width="500" height="40" fill="url(#gradient)"/>
  <rect x="50" y="70" width="500" height="40" fill="url(#gradient)" filter="url(#toLinearRGB)"/>

</svg>

<p>Should look like</p>
<img src="http://tavmjong.free.fr/SVG/COLOR_INTERPOLATION/color_interpolation_gradient.png">

<br>
<code>base svg code and image from <a href="http://tavmjong.free.fr/SVG/COLOR_INTERPOLATION/#Gradients">http://tavmjong.free.fr/SVG/COLOR_INTERPOLATION/#Gradients</a></code><br>
<code>"toLinearRGB" filter from <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=298281#c3">https://bugzilla.mozilla.org/show_bug.cgi?id=298281#c3</a></code>