0

I have SVG element, and I want align text by x and y axis inside.

<svg width="90px" height="90px" viewBox="-9 -3 90 76" style="border: 1px solid black;">
  <g>
     <text>Lorem</text>
  </g>
</svg>

How can i do this? Thanks for any tips.

P.S. I can't change viewBox and sizes of SVG element or move text outside from g element.

Fabio_MO
  • 713
  • 1
  • 13
  • 26
Volodymyr Humeniuk
  • 3,411
  • 9
  • 35
  • 70

2 Answers2

6

Check the snippet below:

<svg width="90px" height="90px" viewBox="-9 -3 90 76" style="border: 1px solid black;">
   <g>
      <text x="40%" y="50%" text-anchor="middle">Lorem</text>
   </g>
</svg>

You could find more info in this answer: How to place and center text in an SVG rectangle

Fabio_MO
  • 713
  • 1
  • 13
  • 26
4

I don't know if this what you are looking for

     <text x="45" y="0">Lorem</text>
Dah
  • 92
  • 8