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

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