Question

背景

在SVG2 spec中，我们可以看到：

用于梯度计算的不透明度值是 Stop-opacity的值和Stop-color值的不透明度。对于不包含显式不透明性的终止色值类型信息，该组件的不透明度必须视为1。

问题

为什么将stop-opacity: 0设置为 100％渐变停止（例如），而不是使渐变停止完全透明？

您可以在下面的代码中看到绿色。

在规范中解释这种行为的文本的指针将不胜感激。

代码

<svg height="150" width="200">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:0" />
    </radialGradient>
  </defs>
  <ellipse cx="100" cy="75" rx="100" ry="75" fill="url(#grad1)" />
  Sorry, your browser does not support inline SVG.
</svg>

编辑1

我正在使用Chrome进行这些测试。不透明度确实可以在Firefox中正常工作。

编辑2

删除了fx fy，以证明即使没有这些问题，问题仍然存在。

Answer 1

SVG 1.1规范在停靠点之间插入颜色的主题没有太多说明。但是到目前为止，我所见过的所有渲染器都符合以下SVG 2规范声明：

对于线性和径向渐变，沿着梯度矢量的两个停靠点之间的颜色值是每个通道的每个停靠点颜色的线性插值，并按距每个停靠点的距离进行加权。

在这种情况下，没有明确表示不透明度被视为通道，但是渲染器也要这样做：如果有两个渐变停止，其中color1和opacity = 1且color2和opacity = 0，则颜色为中间点是颜色值之间的线性插值，不透明度是部分的。

对于您的示例，颜色将发生如下变化：

颜色在0％处停止：红色255，绿色0，蓝色0，不透明度1
25％的颜色插值：红色192，绿色64，蓝色0，不透明度0.75
以50％进行颜色插值：红色128，绿色128，蓝色0，不透明度0.5
以75％的颜色插值：红色64，绿色192，蓝色0，不透明度0.25
颜色停止在100％：红色0，绿色255，蓝色0，不透明度0

随着颜色的褪色，它从红色变为绿色：

几乎所有我可以使用的浏览器都可以看到这一点：Chrome 70 / Windows，Chromium 70 / Debian，Firefox 60esr / Debian，Firefox 62 / Debian，Edge，IE11。唯一的例子是Windows上的Firefox：v62 / 63显示了从不透明红色到透明红色的渐变：

从我的角度来看，这里是Firefox错误。

SVG中radialGradient的不透明行为

1 个答案: