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

Steps to reproduce the problem:
https://jsfiddle.net/3dLtg6fx/4/
1. Three svgs with the same radial gradient using the same <DEF> id (such as you'd have in any partial templating system that includes the same shadow/icon in multiple positions)
2. setting display:none on the first SVG (or any parent container) makes the gradient disappear from all the other instances. To be clear, the remaining two SVGs are still there, but they appear to disappear because the first DEF with the ID of the radial gradient is hidden, so the linked gradient disappears in all three, despite the same ID being in all three SVGs.

What is the expected behavior?
I'd expected SVGs to not mysteriously become blank when the first one is hidden (or hidden in a parent el). I know I'm a noob when it comes to error reporting, but it took quite a lot of bug-hunting to determine the cause.

What went wrong?
Can this be right? I understand the naughtiness of using multiple IDs in XML, but even if the first ID in the DOM is display:none, the definition itself is surely just a visual instruction, not the application of it on the hidden element, so should be available to other SVGs? 

I'm guessing that the browser discards from the DOM any child node of an undisplayed parent, including it's DEFs of which this happens to be the first gradient with this ID. In which case, if the browser is ignoring that DEF, couldn't it just use the next available DEF with the same ID (there are three to choose from in this jsfiddle).

Interestingly, I also use the common SVG spritesheet icon pattern - where small SVG placeholders refer to SVG symbols in the spritesheet via their ID. In this case the icons appear, even when the spritesheet is display:none. I'm confused why this works, but the gradient DEF doesn't.

by the way - I can't imagine building a templating that changes internal DEF IDs for each instance in the page (my head explodes at the thought!).

Did this work before? N/A 

Does this work in other browsers? No
 Other browser behaviour:
- Safari (10.0) shows the gradient in all SVGs after the first one is hidden.
- Firefox (56) has the same behaviour as Chrome, with the additional quirk that when you toggle the first SVG back on, the remaining SVGs still don't get the gradient back. FF seems to notify linked elements when the DEF disappears, but not when it returns.

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

Thanks for your continuing work on pushing the web forward!