Futile32
Futile32

Reputation: 934

Firefox problems with Opacity on SVG "Use" elements that have Masks

I recently noticed one of my SVG images seemed to lose its translucence when viewed in Firefox. I've been tracking down the problem and its led me to opacity not being obeyed when a use element (specifically) has a mask attached.

I was able to use fill-opacity to work-around the issue, but that's not ideal. I'm not entirely sure whats causing it and if its a bug that should be reported to firefox, or if I'm just making a mistake somewhere.

I've put this JSFiddle together to illustrate the issue and alternatives: https://jsfiddle.net/bg4o5y63/

In Chrome, Edge and IE11 all the examples appear the same (as expected), but in Firefox 64.0.2 (latest) #1 doesn't obey the specified opacity.

This also seems to affect use elements that are utilized inside masks that themselves has a mask.

Any thoughts as to what might be causing this, or if I'm slipping up somewhere?

Edit (Screenshot attached): enter image description here

Upvotes: 2

Views: 517

Answers (0)

Related Questions