'SVG text not horizontally center aligning

I generated a SVG using Adobe XD. They use transform for positioning things but the text in my mini computer screen is not always the same width (it is dynamically generated). I have tried anchored, anything I could find but it still didn't work. This is how it looks with the current code: How it looks

Here is the code:

<svg xmlns="http://www.w3.org/2000/svg" width="903.5" height="860.5" viewBox="0 0 1200 1041">
  <g transform="translate(-397)">
    <g
      transform="translate(507 975)"
      fill="#fff"
      stroke="#707070"
      strokeWidth="1"
    >
      <rect width="907" height="66" rx="33" stroke="none" />
      <rect x="0.5" y="0.5" width="906" height="65" rx="32.5" fill="none" />
    </g>
    <rect width="119" height="395" transform="translate(901 613)" fill="#fff" />
    <g
      transform="translate(397)"
      fill="#232323"
      stroke="#fff"
      stroke-width="30"
    >
      <rect width="1127" height="627" rx="103" stroke="none" />
      <rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
    </g>
    <text
      fill="white"
      fontSize="96"
      fontFamily="Fredoka"
    >
      {screenText}
    </text>
  </g>
</svg>
htmlcsssvg


Solution 1:[1]

You can use transform/translate, text-anchor and dominant-baseline to place a text in the middle of something.

body {
background: gray;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1041">
    <g
      transform="translate(600 975)"
      fill="#fff"
      stroke="#707070"
      stroke-width="1">
      <rect x="-453.5" width="907" height="66" rx="33" stroke="none" />
      <rect x="-454" y="0.5" width="906" height="65" rx="32.5" fill="none" />
    </g>
    <rect width="119" height="395" transform="translate(545.5 613)" fill="#fff" />
    <g transform="translate(50)"
      fill="#232323"
      stroke="#fff"
      stroke-width="30">
      <rect width="1127" height="627" rx="103" stroke="none" />
      <rect x="15" y="15" width="1097" height="597" rx="88" fill="none" />
    </g>
    <text
      fill="#fff"
      font-size="96"
      font-family="Fredoka"
      transform="translate(600 300)"
      text-anchor="middle"
      dominant-baseline="middle">
      {screenText}
    </text>
</svg>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 chrwahl

Related Questions