Поведение стоп-непрозрачности в radialGradient в SVG

Question

Фон

В спецификации SVG2 мы можем прочитать, что:

Значение непрозрачности, используемое для расчета градиента, являетсяпроизведение значения стоп-непрозрачности на непрозрачность значения стоп-цвета.Для типов значений стоп-цвета, которые не содержат явной информации о непрозрачности, непрозрачность этого компонента должна рассматриваться как 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.Единственное исключение - Firefox для Windows: в v62 / 63 показан градиент от непрозрачного красного до прозрачного красного:

С моей точки зрения, этоздесь Firefox с ошибкой.