SVG 和字体指标答案

【问题标题】：SVG & font metricsSVG 和字体指标
【发布时间】：2011-03-19 16:12:30
【问题描述】：

有没有办法在 SVG 中获取字体指标？我想要：下降、上升、最大高度、前进。

我需要它来像在流程图中一样将文本和图形一起绘制。

例如，我需要在文本周围画一个框，并从 ex-size（字母'x'的大小）的中间画一条连接线，而不是从框边的中心。

【问题讨论】：

【解决方案1】：

如果您有 DOM 访问权限，则有许多 SVG DOM methods for text elements。然后是 getBBox 方法，它适用于大多数 svg 元素。

如果您正在处理 SVGFonts，则数据已经以 xml 格式作为普通属性提供，例如 ascent, descent 等。

对于您的用例，我推荐getBBox，因为它也可以处理图形元素（以防您想在图表中添加更多内容而不仅仅是文本）。

【讨论】：

我绝对不推荐使用getBBox，因为它只尊重文本的绝对边界。但是，要正确放置文本，就必须尊重上升和下降。 SVGTextElement 的y 属性指定基线的垂直位置。因此，仅使用 BBox 并没有多大帮助。问题是，SVG DOM 方法不允许查询上升和下降信息！我不知道为什么规范中缺少这个。
计算下降，这就是我所做的。将 SVG 中文本元素的“y”设置为零。现在你的基线为零。然后从 getBBox 获取“y2”属性，这将是你的“下降”的高度。