Я недавно заметил, что одно из моих SVG-изображений теряет прозрачность при просмотре в Firefox. Я выследил проблему, и это привело к тому, что opacity не соблюдается, когда к элементу use (в частности) прикреплен mask.
Я смог использовать fill-opacity, чтобы обойти эту проблему, но это не идеально. Я не совсем уверен, что является причиной, и если это ошибка, о которой нужно сообщить firefox, или я просто где-то ошибаюсь.
Я собрал этот JSFiddle, чтобы проиллюстрировать проблему и альтернативы:
https://jsfiddle.net/bg4o5y63/
В Chrome, Edge и IE11 все примеры выглядят одинаково (как и ожидалось), но в Firefox 64.0.2 (последняя версия) # 1 не подчиняется указанному opacity.
Похоже, что это также влияет на use элементы, которые используются внутри masks, которые сами имеют mask.
Есть какие-нибудь мысли о том, что может быть причиной этого, или если я где-то ускользну?
Редактировать (Снимок экрана прилагается):
