SVG中rect元素内文本垂直居中逻辑失效的原因探究

我在项目中尝试基于rect与文本的宽高，将text元素居中于rect元素内，水平居中逻辑可正常运行，但应用相同逻辑实现垂直居中时却失效。

水平居中实现逻辑 #

获取文本的bounding box计算宽度，用rect宽度减去文本宽度后取半得到水平内边距，以此设置text的x坐标，相关代码如下：

let rect = document.getElementById("rectangle");
let rectXCoordinate = Number(rect.getAttribute("x"));
let rectYCoordinate = Number(rect.getAttribute("y"));
let rectWidth = Number(rect.getAttribute("width"));
let rectHeight = Number(rect.getAttribute("height"));

let text = document.getElementById("text");
let textBBox = text.getBBox();

let textWidth = textBBox.width;
let horizontalPadding = (rectWidth - textWidth) / 2;
let textX = rectXCoordinate + horizontalPadding;
text.setAttribute("x", textX);

垂直居中的错误尝试逻辑 #

我认为rect的原点在左上角，y轴向下为正；文本的原点在底部，y轴向上为正。于是计算rect底部坐标，用rect高度减去文本高度取半得到垂直内边距，设置text的y坐标，代码如下：

let textHeight = textBBox.height;
let verticalPadding = (rectHeight - textHeight) / 2;
let textY = rectYCoordinate + rectHeight - verticalPadding;
text.setAttribute("y", textY);

根本原因 #

核心错误在于对SVG文本y坐标的基准理解偏差：

• SVG文本的y坐标默认对应**文本基线（baseline）**的位置，而非文本的底部。getBBox()返回的height是文本最顶端到最底端的总高度，但基线并不在文本高度的中点。
• 你计算时假设文本y是底部位置，但实际设置的y是基线位置，这导致文本整体比预期中心偏下——因为基线通常落在字符主体的下半部分（比如英文小写字母的x-height区域）。
• 此外，getBBox()的height包含了文本的上行（如b、d的顶部）和下行（如g、p的底部），但基线到顶部的距离与到底部的距离并不相等，这进一步放大了居中偏差。

内容的提问来源于stack exchange，提问作者sorry not sorry