SVG 文本略微偏离中心

【问题标题】：SVG text slightly off centerSVG 文本略微偏离中心
【发布时间】：2019-11-17 20:01:38
【问题描述】：

我在一个蓝色矩形上有一些文本，水平和垂直居中。它几乎完全位于中心，但它有点太高了。我该如何解决这个问题，使其完全居中？

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect fill="#8080ff" height="400" width="400" y="0" x="0"/>
    <text font-weight="bold" stroke="black" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" stroke-width="0" fill="#000000">Go</text>
  </g>
</svg>

【问题讨论】：

还有多远？如果您使用height="399"，是否准确？

标签： svg

【解决方案1】：

将dominant-baseline: middle 更改为dominant-baseline: central 解决了这个问题。我必须查一下，但如果我理解正确，central 优先考虑表意基线，而middle 优先考虑字母基线。字母基线紧贴文本的底部，而表意基线位于文本下方。这个额外的空间也位于文本上方（无论使用的基线如何），因此您必须使用表意基线来容纳这个额外的空间，使其完美居中。

我认为这就是它的工作原理。这些是我用来弄清楚的链接，如果您想了解更多。

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline

What is the difference between alphabetic and ideographic in Flutter's TextBaseline enum

【讨论】：