2

I have some text on a blue rectangle, centered horizontally and vertically. It is nearly perfectly in the center, however it is slightly too high. How can I fix this so that it is perfectly centered?

<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>
djvg
  • 11,722
  • 5
  • 72
  • 103
tom894
  • 459
  • 1
  • 3
  • 14

1 Answers1

4

Changing dominant-baseline: middle to dominant-baseline: central fixed the problem. I had to look this up but if I understand it correctly, central prioritises the ideographic baseline whereas middle prioritises the alphabetic baseline. The alphabetic baseline hugs the bottom of the text, whereas the ideographic baseline rests just below the text. This extra space also sits above the text (regardless of the baseline being used), so you have to use the ideographic baseline to accomodate for this extra space, to centre it perfectly.

I think that's how it works anyway. These are the links I used to figure it out, if you want to understand it more.

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

tom894
  • 459
  • 1
  • 3
  • 14