Rotate HTML SVG Text by 270 degrees

Question

I'm struggling to understand how the rotation of text works with the Html SVG Text tags.

I read this, somewhat, similar question rotate x axis text in d3 but the answer doesn't really seem to apply - that i can figure anyway.

Take the following SVG Markup:

<svg>
  <g>
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="2" y="73" font-size="10">1</text>
  </g>
  <g>
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="22" y="73" font-size="10">2</text>
  </g>
  <g>
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="42" y="73" font-size="10">3</text>
    <!-- Trying to rotate this 270 degrees -->
    <text x="42" y="73" font-size="10">Missing</text>
  </g>
  <g>
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="62" y="73" font-size="10">4</text>
  </g>
</svg>

There is some text, in the 3rd group; 'Missing'

I am trying to rotate this 270 degrees, but struggling to understand where it rotates from. I have read it rotates from the origin, but what is the origin in this?

I've tried things like transform="rotate(270, 42, 73)" and various other numbers in place of 42 and 73. I can eventually, with guesswork, get it in the right position though without understanding how it actually works, then i can't add text to the other groups and rotate it.

So, how do i rotate this and, in laymen terms, how does it work?

For clarification - I am looking to achieve:

Instead of guessing, why don't you read the documentation? http://www.w3.org/TR/SVG/coords.html would be a good starting point. There's quite a bit to read, but at least you'll understand what you are doing. — jcaron, Dec 21 '15 at 16:53
Time factors dictate asking for help vs reading a massive document. I'm pretty sure 95% of all questions on SO could be answered with reading documentation, though in the real world, it isn't always that simple — Darren Wainwright, Dec 21 '15 at 16:57
a shorter version of it :D https://sarasoueidan.com/blog/svg-transformations/#rotation — user5542121, Dec 21 '15 at 17:09
An extensively illustrated version: https://css-tricks.com/transforms-on-svg-elements/ — jcaron, Dec 21 '15 at 17:10
Note that I believe your problem is actually not rotation itself, but the actual position of the text. But you haven't provided an indication of what you would like the output to actually be. Surprising coming from someone with such a reputation... — jcaron, Dec 21 '15 at 17:12
@jcaron - Is that why you downvoted? - there is now a pic to illustrate this. Though not sure it required a downvote.... — Darren Wainwright, Dec 21 '15 at 17:27

Paul LeBeau · Answer 1 · 2015-12-23T11:18:14.210

Text is positioned with the baseline starting at the coordinates you provide. In your example you are positioning the "3" and the "Missing" at the same position. Trying to find the right values for the transform, that will rotate the text into position from there, is unnecessarily complicating the process.

I would suggest positioning the "Missing" where you want the (soon to be vertical) baseline to start and apply the rotation once you find the right position.

First step: position the text

<svg width="200" viewBox="0 0 100 100">
  <g>
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="2" y="73" font-size="10">1</text>
  </g>
  <g>
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="22" y="73" font-size="10">2</text>
  </g>
  <g>
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="42" y="73" font-size="10">3</text>
    <!-- Trying to rotate this 270 degrees -->
    <text x="52" y="63" font-size="10">Missing</text>
  </g>
  <g>
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="62" y="73" font-size="10">4</text>
  </g>
</svg>

Second step: now rotate

(52,63) looks about right. So now we can re-use those coordinates for the rotate().

<svg width="200" viewBox="0 0 100 100">
  <g>
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="2" y="73" font-size="10">1</text>
  </g>
  <g>
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="22" y="73" font-size="10">2</text>
  </g>
  <g>
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="42" y="73" font-size="10">3</text>
    <!-- Trying to rotate this 270 degrees -->
    <text x="52" y="63" font-size="10" transform="rotate(270 52 63)">Missing</text>
  </g>
  <g>
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="62" y="73" font-size="10">4</text>
    <text x="72" y="63" font-size="10" transform="rotate(270 72 63)">Missing</text>
  </g>
</svg>

Ultimately, Robert's solution is simpler, but I wanted to help you understand how the rotate transform works with text.

The trouble with this, is what I experienced. Try doing the same for the 4th box; I.E `Missing` - it's out of alignment — Darren Wainwright, Dec 22 '15 at 20:21

score 1 · Accepted Answer · answered Dec 21 '15 at 19:40

This seems to roughly match the drawing. The rotation origin at the bottom left by default.

<svg>
  <g>
    <rect x="0" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="2" y="73" font-size="10">1</text>
  </g>
  <g>
    <rect x="20" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="22" y="73" font-size="10">2</text>
  </g>
  <g>
    <rect x="40" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="42" y="73" font-size="10">3</text>
    <!-- Trying to rotate this 270 degrees -->
    <text transform="rotate(270, 42, 73) translate(10,10)" x="42" y="73" font-size="10">Missing</text>
  </g>
  <g>
    <rect x="60" y="0" width="20" height="75" fill="white" stroke="#CCC" stroke-width="0.5"></rect>
    <text x="62" y="73" font-size="10">4</text>
  </g>
</svg>

Perfect! - so translate() shifts the origin then. great. thanks — Darren Wainwright, Dec 22 '15 at 20:22

Rotate HTML SVG Text by 270 degrees

2 Answers2

Linked