在 svg 中居中文本无法正常工作

Posted 2023-03-29

【中文标题】在 svg 中居中文本无法正常工作

【英文标题】：Centering a text in svg not working correctly

【发布时间】：2021-10-31 18:49:53

【问题描述】：

我无法在 svg 的矩形内居中文本。我遵循了使用主要基线的建议，但文本显示偏离了几个像素，我想了解这是从哪里来的。

下面是 2 个并排标签的 react sn-p，一个使用 svg，另一个使用 flexbox 模型供参考。

我们看到差异的原因是什么？如何在 svg 中实现与 flexbox 对齐项目和对齐内容相同的行为？

const TestSvg = () => 
    const x = 10;
    const width = 52.35581970214844 ;
    const y = 0;
    const height = 14;

    const svg = (
        <svg width='65px' height='30px'>
            <g width=width height=height>
                <rect x=x y=y width=width height=height rx='3px' fill='red'/>
                <text
                    x=x + width / 2 y= y + height / 2
                    style=
                        fontSize: '11px',
                        fontWeight: 700,
                        fill: '#fff',
                        textAnchor: 'middle',
                        dominantBaseline: 'middle'
                    >'BLA'</text>
            </g>
        </svg>
    )

    const flex = (
        <div>
        <div style=display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: 'red', borderRadius: '3px', width: width>
            <div style=
                fontSize: '11px',
                fontWeight: 700,
                color: '#fff',
                textAnchor: 'middle',
                dominantBaseline: 'middle'
            >'BLA'</div>
        </div>
        </div>
    )

    return (
        <div style=display: 'flex'>
            svg
            flex
        </div>
    )

【问题讨论】：

请发布生成的输出 SVG 或工作中的 minimal reproducible example。因此，我们不必为了查看您的代码运行而自己构建 Web 应用程序。

使用 textAnchor: 'middle',dominantBaseline: 'middle' 应该可以解决问题。你能否检查一下 React 返回的结果，并按照@PaulLeBeau 的建议将其发布在这里

【参考方案1】：

我无法解释您报告的差异。

我制作了您的代码的香草版本并删除了<g>。 <text> 需要放在中间（50% 50%）。在 SVG 中，相对位置、大小等通常更容易。

:root 
  --width: 100%;
  --height: 100%;


svg>rect 
  width: var(--width);
  height: var(--height);
  rx: 3px;
  fill: red;


div#s1 
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  border-radius: 3px;
  width: 65px;


svg>text,
div#s1>div 
  font-size: 11px;
  font-weight: 700;
  fill: #fff;
  color: #fff;
  text-anchor: middle;
  dominant-baseline: middle;

<div style="display: flex;">
  <svg  >
      <rect x="0" y="0" />
      <text x="50%" y="50%">BLA</text>
  </svg>
  <div id="s1">
    <div>BLA</div>
  </div>
</div>