SVG矩形内文本居中偏移问题及等效Flex居中效果实现咨询

• 对齐基准规则差异：SVG的dominantBaseline: middle是对齐字体x高度的中点，本质是遵循字体排版的基线规则，会受字体升部、降部的占比影响；而Flex布局的align-items: center是对文本元素的整个内容盒做几何中心对齐，不考虑字体的排版度量指标，两者的对齐逻辑本来就不同。
• 属性兼容性差异：不同浏览器对dominantBaseline的实现存在差异，部分WebKit内核浏览器对该属性的支持度不如alignmentBaseline，单一属性设置可能出现偏移。
• 隐含样式差异：示例中Flex的文本div默认继承了行高属性，而SVG文本没有对应行高的默认对齐规则，也会放大两者的居中差距。

方案1：调整基线属性（简单适配） #

把dominantBaseline: 'middle'替换为dominantBaseline: 'central'，同时加上alignmentBaseline: 'central'做兼容，central是基于字体em框的几何中心对齐，更贴近Flex的居中效果：

<text
    x={x + width / 2} y={ y + height / 2}
    style={{
        fontSize: '11px',
        fontWeight: 700,
        fill: '#fff',
        textAnchor: 'middle',
        dominantBaseline: 'central',
        alignmentBaseline: 'central'
    }}
>{'BLA'}</text>

方案2：手动计算偏移（精度最高） #

渲染后获取文本的实际边界框，手动调整坐标抵消排版偏移：

import { useRef, useEffect } from 'react';

const TestSvg = () => {
  const textRef = useRef(null);
  // 省略原有变量定义
  useEffect(() => {
    if(textRef.current) {
      const bbox = textRef.current.getBBox();
      // 计算文本实际中心和矩形中心的偏移量
      const offsetY = (bbox.y + bbox.height / 2) - (y + height / 2);
      textRef.current.setAttribute('y', (y + height / 2 - offsetY).toString());
    }
  }, []);
  
  // 其余代码不变，给text标签加ref={textRef}即可
}

方案3：用foreignObject嵌套HTML（效果完全一致） #

直接在SVG里用foreignObject嵌入HTML元素，复用Flex布局，和外部的Flex实现效果100%一致：

<svg width={'65px'} height={'30px'}>
  <g width={width} height={height}>
    <rect x={x} y={y} width={width} height={height} rx={'3px'} fill={'red'}/>
    <foreignObject x={x} y={y} width={width} height={height}>
      <div xmlns="http://www.w3.org/1999/xhtml" style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '11px',
        fontWeight: 700,
        color: '#fff'
      }}>
        BLA
      </div>
    </foreignObject>
  </g>
</svg>

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