javascript - 如何获得 SVG 文本的实际高度(不是边界框高度)

Question

我希望能够计算 SVG 中文本(或跨度)元素占用的实际高度。

目前，我通过计算对象边界框的高度来实现这一点，但它采用字体字形的高度，因此我放入元素中的任何文本都具有相同的高度，如下例所示:

var minA = document.getElementById('min-a'),
    capA = document.getElementById('cap-a'),
    minAHeight = document.getElementById('min-a-height'),
    capAHeight = document.getElementById('cap-a-height')
;

minAHeight.innerHTML = minA.getBBox().height;
capAHeight.innerHTML = capA.getBBox().height;

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 80">
  <text id="min-a" x="20" y ="20">a</text>
  <text id="cap-a" x="20" y ="50">Â</text>
  <text id="min-a-height" x="70" y ="20"></text>
  <text id="cap-a-height" x="70" y ="50"></text>
<svg>

如何计算每个元素的实际高度？

Answer 1

@Fuzzyma 走在正确的轨道上。您想要使用 OpenType.js 并在浏览器中加载字体。

// These two match whatever you are doing in your code
const text = 'Hello'
const fontSize = 20

// Load font - I find ttf work better than woff (has extra data for other calculations if needed)
opentype.load(`/path/to/font.ttf`, (err, font) => {

   // Actual dimensions of the text
   const bb = font.getPath(text, 0, 0, fontSize)

})

这将为您提供真正的边界框，可能足以满足您的需求。如果您真的需要使用它来了解文本在屏幕上的位置，这是可能的，但它更具挑战性。

要点是您需要匹配基线。字体包含 ascender/descender (font.tables.hhea.asscender, font.tables.hhea.descender)，一旦转换为 em ( font.tables.head.unitsPerEm * fontSize).

有了这个之后，您需要遍历字体的每个字形并获取 yMax、yMin、xMin 和 xMax。使用上升器/下降器和 Y 坐标确定新 bb 与“假”边界框(DOM 返回的边界框)的距离。左边和右边更容易，除了一些奇怪的字体，它们的字母可以延伸到它们的邻居之外(边缘情况)。

在该浏览器之上添加每个浏览器的垂直偏移...这可以通过获取 SVG 文本元素的 y 属性(即 -5)来提取 - 然后您使用您的字体大小，除以这个 y 的一半，你就得到了浏览器使用的垂直偏移量(在我们的例子中是 5)。每个浏览器都不同，但 y 坐标反射(reflect)了这一点。