我在蓝色矩形上有一些文字,水平和垂直居中。它几乎完美地位于中央,但是有点过高。我该如何解决这个问题,使其完全居中?
<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>
答案 0 :(得分:0)
将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