Я пытаюсь измерить точную высоту, используемую для визуализации заданной строки с заданным шрифтом с текстовым тегом SVG.

Я пытался использовать getBBox и getExtentOfChar, но высота, возвращаемая обоими из них, включает в себя некоторое дополнительное пространство над (и иногда под) фактическим отображаемым текстом.

http://upload.wikimedia.org/wikipedia/commons/3/39/Typography_Line_Terms.svg Используя термины на этом изображении, я пытаюсь получить либо высоту колпачка + высоту спускаемого текста отображаемого текста. Или, если это невозможно, просто высота колпачка. Есть хороший способ рассчитать эти значения?

Вот быстрый код, показывающий дополнительное пространство, о котором я говорю: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(' '));
  });
});

Я понимаю, что это довольно специфичная для шрифта вещь, так что это может быть совершенно невозможно ...