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

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