SVG disappears if filter is applied

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.