0

I've this code:

<svg style="background:pink">
  <style type="text/css">
      .text {
          font-family:'Arial';
          font-size:92px;
          color: #000000;
      }
  </style>
  <text class="text" x="20" y="82">Your text</text>
</svg>

How it's possible to remove the x and y and center the text ?

Thanks.

Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
F__M
  • 1,518
  • 1
  • 19
  • 34
  • Try the suggestions here: https://stackoverflow.com/a/52719480/421195. Please post back whether or not it worked for you. – paulsm4 Mar 19 '23 at 01:48
  • **1**. your svg element has no viewBox and no size defined making it 300px/150px. **2**. In order to center the text make the x="150" (in the middle of the actual svg canvas 300px wide) and add `text-anchor="middle"` **3**. Your font is too big so it will be cropped outside the svg canvas. You may need to change the size of the font. – enxaneta Mar 19 '23 at 07:18
  • There are a zillion solutions here: https://stackoverflow.com/questions/5546346/how-to-place-and-center-text-in-an-svg-rectangle – Danny '365CSI' Engelman Mar 20 '23 at 07:47

0 Answers0