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

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

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

1 个答案: