SVG disappears if filter is applied - html

Question

I've been playing around with SVGs in websites, and I've been trying to get filters to work, but I can't seem to get it right.
The problem is that the svg disappears completely once I apply a defined filter. I've tried to apply the filter inline, just to see if it worked, like this:
<symbol id="circle" viewBox="0 0 400 209.603" filter="url('#blur-filter')">
...
</symbol>
but with no success.
Ultimately, my goal is that I would be able to apply the filters via CSS, but I can't seem to get it to work, and this is the first time I've really played around with SVGs, so I don't know if I'm making some obvious mistake.
Code:
.svg-circle:hover {
filter: url("#blur-filter");
}
.svg-grey {
fill: #333;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
<defs>
<filter id="blur-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<symbol id="circle" viewBox="0 0 400 209.603">
<circle cx="100" cy="100" r="100" />
</symbol>
</defs>
</svg>
<svg>
<use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>
I want the filter to be applied when I hover over the element. My other question is how I can incorporate this with CSS transitions, so that the blur gets applied gradually, like other css3 transitions.
I also want the filters to be global, so they can be reused across multiple svg images whenever I want, so define once, and reuse.
I've also created a Codepen to demonstrate my problem.

Answer 1

Remove your style="display:none" and add width:0 to your first svg
.svg-circle:hover {
filter: url("#blur-filter");
}
.svg-grey {
fill: #333;
}
svg:first-of-type {
width:0
}
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="blur-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<symbol id="circle" viewBox="0 0 400 209.603">
<circle cx="100" cy="100" r="100" />
</symbol>
</defs>
</svg>
<svg>
<use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>

Answer 2

Remove the display: none; on the definitions SVG and give it 0 dimensions. This should do it. Somehow the filter may be inheriting that display: none.
.svg-circle:hover {
filter: url("#blur-filter");
}
.svg-grey {
fill: #333;
}
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<defs>
<filter id="blur-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<symbol id="circle" viewBox="0 0 400 209.603">
<circle cx="100" cy="100" r="100" />
</symbol>
</defs>
</svg>
<svg>
<use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>
As for the transition, I don't think you can do that by using referenced filters.

Answer 3

html, body {
margin: 0;
padding: 0;
}
.svg-circle:hover {
filter: url("#blur-filter");
}
.svg-grey {
fill: #333;
}
<svg width="0" height="0">
<defs>
<filter id="blur-filter">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>
<symbol id="circle" viewBox="0 0 400 209.603">
<circle cx="100" cy="100" r="100" />
</symbol>
</defs>
</svg><svg width="400" height="210">
<use xlink:href="#circle" class="svg-circle svg-grey"/>
</svg>