是否可以更准确地测量SVG文本高度？

Question

我正在尝试使用带有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(' '));
  });
});

我知道这是一个相当字体的东西,所以这可能是完全不可能的......

Answer 1

不会。所有 SVG DOM 方法 ( getBBox()、getExtentOfChar()) 都被定义为返回完整的字形单元高度。大写字母高度上方的额外空间是为了容纳更高的字形 - 例如带重音的大写字母。我认为 HTML DOM 方法也是如此。

然而，有一些 JS 库可能有用。例如：

https://github.com/Pomax/fontmetrics.js

我自己没有使用过这个库，所以我无法告诉你它的可靠性或准确性。