Hi, I’ve been working on a project which uses SVG icons, and I’ve been using the technique for SVG sprites from here (https://css-tricks.com/svg-sprites-use-better-icon-fonts/).
All worked fine, but after the last Firefox update (version 57, in the v58 of the Developer’s Edition is happening too), the icons have stopped accepting all external CSS styling, appearing in the initial color (black, in my case). After a bit of code smashing I’ve come to determinate the cause: If the SVG inner elements have set ‘fill’ or ‘stroke’ inline values (i.e. path fill=”#CCCCCC” stroke=”#FFFFFF”), they ignore all attempts to style it otherwise, even if they have the fill and stroke CSS values set to ‘inherit’ later on.
Right now I’m stripping my sprite of all the fill and stroke values just to get all to work again, leaving only a few fill=”none” needed for the icons to look right.
This is not hapening in any other browser (Chrome, IE, Edge…), and was not happening in Firefox 56. These browsers are overriding the inline values with the ones in the CSS as usual, so this is something new we need to be aware of. Just thought you should know about this, in case you haven’t experienced it yet ;)
