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

我试图测量使用SVG文本标记呈现给定字体的给定字符串的确切高度

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

使用此图像中的术语，我试图获得所渲染文本的封口高度+下降高度。或者，如果这是不可能的，只是帽子的高度。有没有计算这些值的好方法

下面是一个快速代码笔，显示我所说的额外空间：

HTML:

---

我知道这是一个相当特定于字体的东西，所以这可能是完全不可能的…

否。所有SVG DOM方法（getBBox（）、getExtentOfChar（））都定义为返回完整的glyph单元格高度。帽高上方的额外空间允许使用更高的标志符号，例如重音大写字母。我认为HTMLDOM方法也是如此

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

---

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

好的，谢谢。看起来您可以通过在y=0处渲染文本并从其高度减去bbox的y偏移量（假设主基线设置为字母顺序）来计算下降高度。但是仍然没有办法获得上升高度或帽子高度。。。真倒霉

<div>
  <svg><text>Hello</text></svg>
  <svg><text>Age</text></svg>
</div>

$(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(' '));
  });
});