SVG disappears if filter is applied
<p>I've been playing around with <code>SVG</code>s in websites, and I've been trying to get <code>filter</code>s to work, but I can't seem to get it right.</p>

<p>The problem is that the <code>svg</code> disappears completely once I apply a defined <code>filter</code>. I've tried to apply the <code>filter</code> inline, just to see if it worked, like this:</p>

<pre><code>&lt;symbol id="circle" viewBox="0 0 400 209.603" filter="url('#blur-filter')"&gt;
...
&lt;/symbol&gt;
</code></pre>

<p>but with no success.</p>

<p>Ultimately, my goal is that I would be able to apply the <code>filter</code>s via CSS, but I can't seem to get it to work, and this is the first time I've really played around with <code>SVG</code>s, so I don't know if I'm making some obvious mistake.</p>

<h3>Code:</h3>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.svg-circle:hover {
  filter: url("#blur-filter");
}
.svg-grey {
  fill: #333;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" style="display:none"&gt;
  &lt;defs&gt;
    &lt;filter id="blur-filter"&gt;
      &lt;feGaussianBlur in="SourceGraphic" stdDeviation="2" /&gt;
    &lt;/filter&gt;
    &lt;symbol id="circle" viewBox="0 0 400 209.603"&gt;
      &lt;circle cx="100" cy="100" r="100" /&gt;
    &lt;/symbol&gt;
  &lt;/defs&gt;
&lt;/svg&gt;

&lt;svg&gt;
  &lt;use xlink:href="#circle" class="svg-circle svg-grey"/&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>

<p>I want the <code>filter</code> to be applied when I hover over the element. My other question is how I can incorporate this with CSS <code>transitions</code>, so that the <code>blur</code> gets applied gradually, like other css3 <code>transitions</code>.</p>

<p>I also want the filters to be global, so they can be reused across multiple <code>svg</code> images whenever I want, so define once, and reuse.</p>

<p>I've also created a <a href="http://codepen.io/naxez7/pen/LGaoZE" rel="nofollow">Codepen</a> to demonstrate my problem.</p>