Rotate Html Svg Text By 270 Degrees

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 rea

Solution 1:

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

<svgwidth="200"viewBox="0 0 100 100"><g><rectx="0"y="0"width="20"height="75"fill="white"stroke="#CCC"stroke-width="0.5"></rect><textx="2"y="73"font-size="10">1</text></g><g><rectx="20"y="0"width="20"height="75"fill="white"stroke="#CCC"stroke-width="0.5"></rect><textx="22"y="73"font-size="10">2</text></g><g><rectx="40"y="0"width="20"height="75"fill="white"stroke="#CCC"stroke-width="0.5"></rect><textx="42"y="73"font-size="10">3</text><!-- Trying to rotate this 270 degrees --><textx="52"y="63"font-size="10">Missing</text></g><g><rectx="60"y="0"width="20"height="75"fill="white"stroke="#CCC"stroke-width="0.5"></rect><textx="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().

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

Solution 2:

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

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