Estoy tratando de medir la altura exacta utilizada para representar una cadena dada con una fuente dada con una etiqueta de texto SVG.

Intenté usar getBBox y getExtentOfChar, pero la altura devuelta por estos dos incluye un poco de espacio adicional por encima (y a veces por debajo) del texto real representado.

http://upload.wikimedia.org/wikipedia/commons/3/39/Typography_Line_Terms.svg Usando los términos en esta imagen, estoy tratando de obtener la altura de la tapa + la altura del descendiente del texto que se está representando. O, si eso no es posible, solo la altura de la tapa. ¿Hay una buena manera de calcular estos valores?

Aquí hay un codepen rápido que muestra el espacio extra del que estoy hablando:http://codepen.io/pcorey/pen/amkGl

HTML:

<div>
  <svg><text>Hello</text></svg>
  <svg><text>Age</text></svg>
</div>

JS:

$(function() {
  $('svg').each(function() {
    var svg = $(this);
    var text = svg.find('text');

    var bbox = text.get(0).getBBox();
    svg.get(0).setAttribute('viewBox',
                           [bbox.x,
                            bbox.y,
                            bbox.width,
                            bbox.height].join(' '));
  });
});

Entiendo que esto es bastante específico de la fuente, por lo que esto podría ser totalmente imposible ...