SVG中font-size与文本定位x/y百分比的关系及文本居中实现问题

核心遗漏概念 #

你当前的方案失效核心是两点：

• 单位不匹配：你给字体设置的是pt单位，而SVG的viewBox使用的是无单位逻辑像素，pt与像素的换算受设备DPI影响，会导致实际渲染的字体尺寸和预期的SVG区域比例出现偏差，字号越大偏差越明显。
• 字体基线规则：dominant-baseline: middle的对齐基准是字体的em-box中线，和字形实际可见区域的中线存在字体本身的设计偏差，大字号下会被放大显现。

通用居中方案 #

不需要手动调整坐标百分比，只要调整单位配置即可实现稳定的自适应居中，字号变动也不会出现偏移：

1. 将字体大小的单位改为和viewBox匹配的px/无单位，直接基于SVG的逻辑尺寸设置字号，消除单位换算误差。
2. 保留text-anchor: middle实现水平居中，dominant-baseline: middle实现垂直居中，文本坐标直接设置为目标区域的中心坐标即可。

修改后的代码示例：

<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200">
  <style>
/* 字体单位改为px，匹配viewBox逻辑尺寸 */
.f{font-family:monospace;font-size:80px}
  </style>
  <rect width="50%" height="50%" y="0%" fill="red"/>
  <rect width="50%" height="50%" y="50%" fill="green"/>
  <rect width="50%" height="50%" y="0%" x="50%" fill="yellow"/>
  <rect width="50%" height="50%" y="50%" x="50%" fill="blue"/>
  
  <text x="25%" y="25%" class="f" dominant-baseline="middle" text-anchor="middle">X</text>
  <text x="75%" y="25%" class="f" dominant-baseline="middle" text-anchor="middle" fill="blue">X</text>
  <text x="25%" y="75%" class="f" dominant-baseline="middle" text-anchor="middle">X</text>
  <text x="75%" y="75%" class="f" dominant-baseline="middle" text-anchor="middle">X</text>
</svg>

如果需要兼容不支持dominant-baseline属性的老旧浏览器，可以将该属性替换为dy=".3em"即可，该修正比例和字号无关，修改字号时无需额外调整。

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