2

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

Futile32
  • 834
  • 2
  • 8
  • 15
  • Not sure what I'm supposed to see here. It looks the same in Safari and Firefox on my Mac. – Robert Longson Jan 21 '19 at 20:07
  • For Firefox on Windows the first example does not obey the opacity. What version of FF on the Mac are you using? – Futile32 Jan 22 '19 at 22:55
  • both the official 64.0.2 and one built from the latest source with random unrelated things I'm currently working on. Presumably it's a Windows thing then. You should raise a bug in [bugzilla](https://bugzilla.mozilla.org/) – Robert Longson Jan 23 '19 at 06:53
  • Thx will try on Mac and Linux and raise with Mozilla. – Futile32 Jan 23 '19 at 08:25

0 Answers0