title: How can I get tight bounds of an svg text element?
body: <p>I need 'tight' bounds of SVG text elements.  When I use <code>getBBox</code>, I get height that seem to include full possible glyph height for a font without regard for the specific characters in my text.  What I get for width varies per browser but generally includes a few units more than the characters actually take up in length. Is there any way to get a box that precisely wraps only the characters in my text?</p>
  <p>For example, I want the rect created below to tightly wrap the text '.....'  However, there is a lot of 'leftover' vertical space in the bounding box returned by <code>getBBox</code>.  Thanks for any help.  This is my first post to StackOverflow, so I also welcome formatting/question presentation critiques.</p>
  <pre><code>&lt;svg width=&quot;400&quot; height=&quot;400&quot;&gt;
          &lt;text&gt;.....&lt;/text&gt;
          &lt;rect style=&quot;fill:none;stroke:rgb(0,100,100);stroke-width:1&quot;/&gt;
  &lt;/svg&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
      var layout = function() {
          var numB = $(&quot;text&quot;).get(0).getBBox();
          $(&quot;rect&quot;).attr(&quot;x&quot;, 0);
          $(&quot;rect&quot;).attr(&quot;y&quot;, 0);
          $(&quot;rect&quot;).attr(&quot;width&quot;, numB.width);
          $(&quot;rect&quot;).attr(&quot;height&quot;, numB.height);
          $(&quot;text&quot;).attr(&quot;y&quot;, numB.height);
      }
      
      document.onreadystatechange = function () {
          if (document.readyState == &quot;complete&quot;) {
              layout();
          }
      }
  &lt;/script&gt;
  </code></pre>