Question

在svg中，您可以定义在空间中两种颜色之间进行插值的a linear gradient。

编辑 docs indicate一些rgb空格但不多。有没有解决方法？

我想知道是否有人能够为渐变尝试不同的颜色插值。能够使用感知上均匀的空间进行线性变换是很棒的。

Answer 1

规范确定了color-interpolation属性，其值应设置为auto | sRGB | linearRGB | inherit。
但是Web浏览器目前只默认为sRGB值。 [mozilla bug]。

但是可以通过<filter>更正伽玛值来解决此问题。

aforementioned bug report中的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>

svg linearGradient并设置颜色空间插值

1 个答案: