是否可以更准确地测量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

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