html - SVG 中 radialGradient 的停止不透明度行为

Question

背景

在SVG2 spec我们可以读到:

The opacity value used for the gradient calculation is the product of the value of stop-opacity and the opacity of the value of stop-color. For stop-color value types of that don't include explicit opacity information, the opacity of that component must be treated as 1.

问题

为什么在 100% 渐变停止上设置 stop-opacity: 0(例如)，不会使渐变停止完全透明？

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

如果能指出规范中解释此行为的文本，我们将不胜感激。

代码

<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 规范声明:

For linear and radial gradients, the color value between two stops along the gradient vector is the linear interpolation, per channel, of the color for each stop, weighted by the distance from each stop.

在此上下文中并未明确表示不透明度被视为 channel ，但这又是渲染器所做的:如果有两个渐变停止点，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。唯一的异常(exception)是 Windows 上的 Firefox:v62/63 显示从不透明红色到透明红色的渐变:

在我看来，这里是 Firefox 的错误。