UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

Steps to reproduce the problem:
Create an SVG containing multiple elements (paths etc).
Re-use this SVG via the <use> tag.
Style each element differently e.g. different stroke/fill colours.

Problem
Chrome (and other browsers) allow me to do this, which is exactly what I would like, but after logging a bug with firefox I was informed the bug is actually with the other browsers.

Resolution
My preference would be to have Firefox/Safari behave how Edge does, but unfortunately, instead I am filing this bug 😭
Please could you confirm this behaviour is a bug?
If not, are you able to help me persuade Firefox/Safari that the bug is with them?

What is the expected behavior?
The styles are not applied

Chrome (and other browsers) allow me to style these elements differently, which is exactly what I would like, but after logging a bug with Firefox I was informed the bug is actually with the other browsers.

What went wrong?
the styles were applied

Resolution
My preference would be to have Firefox/Safari behave how Chrome/Edge does, but unfortunately, instead I am filing this bug 😭

Please could you confirm this behaviour is a bug?
If not, are you able to help me persuade Firefox/Safari that the bug is with them?

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 62.0.3202.94  Channel: stable
OS Version: OS X 10.12.6
Flash Version: 

CodePen Demo: 
https://codepen.io/peter-mouland/pen/pdEMWZ

Firefox Bugzilla Report Response: "not a bug"
https://bugzilla.mozilla.org/show_bug.cgi?id=1415186

Webkit Bug Report: awaiting response
https://bugs.webkit.org/show_bug.cgi?id=179724

Edge Issues: Awaiting Response
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/14673751/