Reputation: 934
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?
Upvotes: 2
Views: 517