Qfyilyi

Background

In the SVG2 spec we can read that:

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.

Question

Why does setting stop-opacity: 0 on a 100% gradient stop (for example), not make that gradient stop completely transparent?

You can see the green in the code below.

Pointers to text in the spec that explains this behavior, would be appreciated.

Code

<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>

EDIT 1

I was using Chrome for these tests. The opacity does work as expected in Firefox.

EDIT 2

Removed fx fy to demonstrate that problem still remains, even without those.

The SVG 1.1 spec doesn't say much on the subject of interpolating colors between stops. But all the renderers I have seen so far are in concordance with this SVG 2 spec statement:

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.

It's not explicitely said that opacity is treated as a channel in this context, but again that is what renderers do: If there are two gradient stops with color1 and opacity=1 and color2 and opacity=0, then the color at an intermediate point is a linear interpolation between the color values, and the opacity is partial.

For your example color will change like this:

• color stop at 0%: red 255, green 0, blue 0, opacity 1


• color interpolation at 25%: red 192, green 64, blue 0, opacity 0.75


• color interpolation at 50%: red 128, green 128, blue 0, opacity 0.5


• color interpolation at 75%: red 64, green 192, blue 0, opacity 0.25


• color stop at 100%: red 0, green 255, blue 0, opacity 0

As the color fades, it goes from red to green:

I can see this with almost all browsers I have access to: Chrome 70/Windows, Chromium 70/Debian, Firefox 60esr/Debian, Firefox 62/Debian, Edge, IE11. The only exeption is Firefox on Windows: v62/63 show a gradient going from opaque red to transparent red:

From my point of view, it is Firefox that is in error here.