Viewing SVG with css fill property not working in Firefox

Firefox Development
1

I am trying to implement a web page with a svg tag using a css fill property as such

fill: url(#liner-gradient)

The svg appears fine in Chrome and Edge but not in Firefox. Specifically the fill color in Firefox is incorrect.
When I look at the css selector in developer tools it appears that Firefox cannot does not understand what to do.

I found this Stack Overflow post where the poster seems to have the same issue.

The suggested resolution does not work for me.

I do not see anything listed for this issue on bugzilla.

Is there are a workaround on Firefox for this?

2

From your description it sounds like you have examined this well. I thing creating a compete example of the issue and putting it Bugzilla would be a good idea.

There is a more active community on the Matrix. See https://wiki.mozilla.org/Matrix . SVG is sometimes discussed in the graphics room, #gfx:mozilla.org .

3

Thank you @bjh

I was hesitant to create a new issue for this since I was unsure if I was doing something incorrect.

I will create a new bug report.