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:

Answer 1

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>

Answer 2

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.