title: JQuery width and height not working on svg in firefox
body: <p>I am trying to make SVG rectangle around SVG text. When i want to use <code>.width()</code> or <code>.height()</code> on SVG text, Chrome returns what I expect but Firefox does not. Here is link to <a href="http://jsfiddle.net/fDcZS/974/" rel="noreferrer">jsfiddle</a> demo I made.</p>
  
  <pre><code>$(document).ready(function(){
      var $rect = $(document.createElementNS('http://www.w3.org/2000/svg', 'rect'));
      var x = 50;
      var y = 50;
      var fontSize = 10;
      $rect.attr({
          'x' : x,
          'y' : y,
          'stroke' : 'black',
          'stroke-width' : 1,
          'fill' : 'white'
      });
      $rect.appendTo($("#svgArea"));
  
      var $svgText = $(document.createElementNS('http://www.w3.org/2000/svg', 'text'));
      $svgText.attr({
          'x': x,
          'y': y,
          'font-family' : 'verdana',
          'font-weight': 'bold',
          'font-size' : fontSize
      });
  
      var node = document.createTextNode("Lorem Ipsum");
      $svgText.append(node);
      $svgText.appendTo($("#svgArea"));
  
      var textWidth = $svgText.width();
      var textHeight = $svgText.height();
  
      $rect.attr({
          'x': x,
          'y': y - textHeight + 3,
          'width' : textWidth + 2,
          'height': textHeight
      });
  });
  </code></pre>
  
  <p>html</p>
  
  <pre><code>    &lt;svg height="200px" width="200px" id="svgArea"&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#svgArea{
      border: 1px solid black;
  }
  </code></pre>