Aim: To create an SVG containing multiple elements and to re-use this SVG via the <use> element. I would then like to style each element differently e.g. different stroke/fill colours. Problem Chrome, Edge, ie11 and Opera allow me to do this, which is exactly what I would like, unfortunately within Safari (and Firefox) no visible SVG is rendered. Resolution My preference would be to have Firefox/Safari behave how Edge (and the others) do, Please could you confirm this behaviour is a bug? Links: CodePen Demo: https://codepen.io/peter-mouland/pen/pdEMWZ firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1415186 Edge bug: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14673751/
*** Bug 212902 has been marked as a duplicate of this bug. ***
A reduced test case is: https://www.w3.org/TR/SVG2/images/struct/Use-changed-styles.svg.
WebKit and Chrome produce identical rendering. Firefox does not.