SVG Text rotation

Question

I have a text with textContent "Design", that was transformed with css to be rotated 90 degree around the center (100,100), so it appears vertically. It rotate the entire coordinate system around the center, I want the element (ie “Design”) alone should rotate

Original position:

Result:

Expected :

SVG:

<svg>
<text x="70" y="30" width="64" height="16" fill="black" transform="rotate(90,100,100)">Design</text>
</svg>

What is the problem ? why text element x position changed ? how could i rotate the text in fixed x-position ?

i want to rotate a text in fixed x-position ?

Thanks,

Siva

Answer 1

If you would like text at 100,100 rotated 90 degrees then try the following:

<svg>
  <text text-anchor="middle" transform="translate(100,100) rotate(90)">Design</text>
</svg>

This is much more straight-forward than the alternatives.

Keep in mind that the order of the transform parameters, translate and rotate, matters.

See the snippet below to see how it alters the outcome.

.translate {
  stroke: green;
  stroke-width: 2;
  fill: none;
  }
  
.rotate {
  stroke: red;
  stroke-width: 2;
  fill: none;
  }
  
.reference {
  stroke: blue;
  border: solid 1px blue;
  }

<svg class="reference" width="250" height="170" viewBox="-125 -25 250 170">
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="black"/>
  <line class="translate" x1="0" x2="100" y1="0" y2="100"/>
  <circle class="rotate" cx="100" cy="100" r="3"/>
  <text text-anchor="middle" class="reference">0,0</text>
  <text text-anchor="middle" transform="translate(100,100) rotate(90)">TR</text>
</svg>

<svg class="reference" width="250" height="170" viewBox="-125 -25 250 170">
  <rect x="0" y="0" width="100" height="100" fill="none" stroke="black"/>
  <path class="rotate" d="M -100 100 A 141.1 141.1 0 0 0 100 100"/>
  <line class="translate" x1="0" x2="-100" y1="0" y2="100"/>
  <text text-anchor="middle" class="reference">0,0</text>
  <text text-anchor="middle" transform="rotate(90) translate(100,100)">RT</text>
</svg>

Answer 2

The reason may be that the text-anchor is in the middle, so the (x, y) coordinates are for the center of the text and it is rotating about its center. You can add a text-anchor="start" attribute to the text, but then it won't be centered.

EDIT: The reason the x-coordinate has changed is because you are rotating around the point(100, 100) and the text is at (70, 30). The text is therefore at (-30, -70) relative to the center of rotation so after rotation through 90 degrees will be at (70, -30). Why not rotate centred on (70, 30)?