Как настроить размер многострочного текста в SVG и расположить его посередине

Question

У меня есть текст, который я хочу настроить в соответствии с размером контейнера SVG и расположить его посередине (по горизонтали и вертикали). Я ищу относительный путь, а не абсолютный. До сих пор я пытался поместить текст в svg и настроить его с помощью атрибута viewBox, а также функции transform: scale.

Есть ли стандартный способ сделать это?

UPDATE:

С помощью комментаторов я смог поместить текст в середину контейнера svg. Спасибо!

Однако я все еще не могу поместить многострочный текст посередине. Второй фрагмент кода - самый дальний от решения.

Рабочий код для одной строки текста:

<svg width="890" height="500"overflow="hidden;">
<g>
  <rect x="0" y="0" width="542" height="495" fill="#6fdd6f"></rect>
  <svg x="0" y="0" width="542" height="495" viewBox="0 0 100 100">      
      <text  alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" x="50%" y="50%">TXT</text>
  </svg>
</g>
</svg>

Код с мультилинией, который необходимо отрегулировать по центру:

<svg width="890" height="500"overflow="hidden;">
<g>
  <rect x="0" y="0" width="542" height="495" fill="#6fdd6f"></rect>
  <svg x="0" y="0" width="542" height="495" viewBox="0 0 100 100">      
      <text alignment-baseline="middle" dominant-baseline="middle" text-anchor="middle" >
      <tspan x="50%" y="50%">TXT</tspan>
      <tspan dy="1em" x="50%" y="50%">more TXT</tspan>
      <tspan dy="2em" x="50%" y="50%">end of TXT</tspan>
      </text>
  </svg>
</g>
</svg>