title: SVG Filter causes clipping of SVG with viewbox in Firefox
body: <p>I am trying to create a resizable SVG shape, with a 'glow' effect when it is selected using a gaussian filter. When I try to apply the filter as below, in Firefox (tried on v39+), the filter seems to cause the rectangle to be clipped at the bottom as soon as the height of the SVG element is > about 490.  This doesn't happen in chrome though.  If the filter is removed, the rectangle is not clipped.</p>
  
  <p>I've mucked around for hours trying various combinations for the filter effect region parameters, but can't seem to find anything that works for arbitrary sizes of the SVG element.  Putting the filter on the g element seems to work, but here are going to be other children that I don't want the filter to apply to.</p>
  
  <p>What am I missing and how can I make this work?</p>
  
  <p>Thanks,</p>
  
  <p>Dave</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div style = "width: 100%; height: 100%"&gt;
      &lt;svg style = "width: 100%; height: 100%"&gt;
          &lt;defs&gt;
              &lt;symbol id="rectangle"&gt;
                  &lt;polygon vector-effect="non-scaling-stroke" points="3,3 103,3 103,53 3,53"&gt;&lt;/polygon&gt;
              &lt;/symbol&gt;
          &lt;/defs&gt;         
          &lt;filter id="nodeGlow" width="100" height="100"&gt;
              &lt;feGaussianBlur stdDeviation="3" result="coloredBlur"/&gt;
              &lt;feMerge&gt;
                  &lt;feMergeNode in="coloredBlur"/&gt;
                  &lt;feMergeNode in="SourceGraphic"/&gt;
              &lt;/feMerge&gt;      
          &lt;/filter&gt;           
          &lt;g&gt;
              &lt;svg style="fill: rgb(0, 251, 255); 
                          stroke: rgb(30, 30, 30); 
                          stroke-width : 1.5px;
                          filter: url(&amp;quot;#nodeGlow&amp;quot;);"
                          y="0" x="0" 
                          height="500" width="200" 
                          class="node" preserveAspectRatio="none" 
                          viewBox="0 0 106 56"&gt;
                  &lt;use xlink:href="#rectangle"&gt;&lt;/use&gt;
              &lt;/svg&gt;
          &lt;/g&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>Update</strong>:  Robert's suggestion to add another <code>&lt;g&gt;</code> element did the trick, although I put it around the <code>&lt;svg&gt;</code> element rather than the <code>&lt;use&gt;</code> element because the blur effect looked poor when scaled up if it was around the <code>&lt;use&gt;</code>.  I didn't add it to the existing <code>&lt;g&gt;</code>, cause there will be other children of that one that shouldn't have the filter.</p>