Search code examples
svgtextrotation

Rotate and move text element in SVG

How can I place text in svg as shown below such that:

  • the text is rotated by -90 deg
  • the mid point of the text (intersection of diagonal lines) has a fixed point P after transformation (for example P.x = 200, P.y = 300)

Text

On my attempts I was able to rotate the element, however I cannot seem to position it correctly. I even experimented with base lines, center of rotations etc. but I am completely lost now. Thank you <3

<text transform="rotate(-90, 0, 0) translate(200, 300)" dominant-baseline="central">Some Text</text>

Solution

  • Guess I finally solved it. Sorry for wasting your time.

    <rect fill="red" width="100" height="100"></rect>
<text transform="translate(100, 100) rotate(-90)" text-anchor="middle" dominant-baseline="central" style="font-size: 18px;">Some Text</text>

    Text