title: Angular and SVG filters
body: <p>I came accross a strange behaviour when using SVG with AngularJS. I'm using the <a href="http://docs.angularjs.org/api/ngRoute.$routeProvider" rel="noreferrer"><code>$routeProvider</code></a> service to configure my routes. When I put this simple SVG in my templates, everything is fine:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="my-template"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
          &lt;rect fill="red" height="200" width="300" /&gt;
      &lt;/svg&gt;
      // ...
  &lt;/div&gt;
  </code></pre>
  
  <p>But when I add a filter, with this code for instance:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="my-template"&gt;
      &lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
          &lt;defs&gt;
              &lt;filter id="blurred"&gt;
                  &lt;feGaussianBlur stdDeviation="5"/&gt;
              &lt;/filter&gt;
          &lt;/defs&gt;
          &lt;rect style="filter:url(#blurred)" fill="red" height="200" width="300" /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then:</p>
  
  <ul>
  <li>It works on my <strong>homepage</strong>.</li>
  <li>With <em>Firefox</em>, the SVG isn't visible anymore on <strong>the other pages</strong>, but it still leaves space where it would have been. With <em>Chrome</em>, the SVG is visible, but not blurred at all.</li>
  <li>The SVG is visible again when I remove manually (with Firebug) the <code>filter</code> style.</li>
  </ul>
  
  <p>Here is the routes configuration:</p>
  
  <pre class="lang-js prettyprint-override"><code>$routeProvider
      .when('/site/other-page/', {
              templateUrl : 'view/Site/OtherPage.html',
              controller : 'Site.OtherPage'
      })
      .when('/', {
              templateUrl : 'view/Site/Home.html',
              controller : 'Site.Home'
      })
      .otherwise({
          redirectTo : '/'
      })
  ;
  </code></pre>
  
  <p><kbd><a href="http://jsfiddle.net/Blackhole/chehd/2/" rel="noreferrer">Fiddle</a></kbd></p>
  
  <p><em>Please notice that I've failed to reproduce the problem with Chrome in a Fiddle, although it "works" with Firefox.</em></p>
  
  <p>I've tried to no avail to create my whole SVG with <code>document.createElementNS()</code>.</p>
  
  <p>Does someone has an idea of what is happening?</p>