是否可以更精确地测量SVG文字高度？

我试图测量用SVG文本标记给定字体给定字符串的确切高度。是否可以更精确地测量SVG文字高度？

我试过使用getBBox和getExtentOfChar，但这两个返回的高度在实际文本呈现的上方（有时低于）包含一些额外的空间。

http://upload.wikimedia.org/wikipedia/commons/3/39/Typography_Line_Terms.svg 使用此图像中的术语，我试图获取正在渲染的文本的帽高+下降高度。或者，如果这是不可能的，只是帽高。有没有一种很好的方法来计算这些值？

这里展示我谈论的额外空间的快速codepen： 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(' ')); 
    }); 
});

我明白，这是一个相当字体 - 具体的东西，所以这可能是完全不可能的...

来源

2014-10-10 pcorey

否。所有SVG DOM方法（getBBox（），getExtentOfChar（））都定义为返回完整的字形单元高度。帽高以上的额外空间允许使用较高的字形 - 例如重音首字母。我认为HTML DOM方法也是如此。

但是，有一些JS库可能在其中使用。例如：

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

我还没有使用这个库自己，所以我不能告诉你如何可靠或准确的是。

来源

2014-10-10 02:00:19

好的，谢谢。看起来你可以通过在y = 0处渲染文本并从其高度减去bbox的y偏移来计算下降高度（假设显性 - 基线设置为按字母顺序）。仍然没有办法获得上升高度或帽高度，尽管......无赖。 – pcorey 2014-10-10 04:01:52

是否可以更精确地测量SVG文字高度？

回答

相关问题