SVG文字稍微偏离中心

我在蓝色矩形上有一些文字,水平和垂直居中。它几乎完美地位于中央,但是有点过高。我该如何解决这个问题,使其完全居中?

<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>
dcx6327 回答:SVG文字稍微偏离中心

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

本文链接:https://www.f2er.com/3084936.html

大家都在问