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

Gerund

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>

Unscratched

Answer 2

Follow these 3 steps:

1. Wrap the <text> element in <g>.
2. Move/translate the <g> and therefore the <text>'s anchor point (here: effectively the top of the text, after rotation) to the desired position.
3. Rotate the <text>, set its anchor and don't translate, as in the examples below.

Little explanation:

The idea is to move the transformation reference point to where the <text> is and prevent both transformations from interfering with each other, otherwise, translation and rotation will be applied at the same time in reference to a point that is "somewhere else" — very difficult to control.

<svg>
  <g transform="translate(42, 0)">
     <text
       text-anchor="start"
       transform="rotate(90)"
     >
       Design
    </text>
  </g>
</svg>

Alternatively, if you want the text baseline to be on the right (reads easier):

<svg>
  <g transform="translate(42, 0)">
    <text
      text-anchor="end"
      transform="rotate(-90)"
    >
      Design
    </text>
  </g>
</svg>

Roofing

This is easier than the top answer – Publicspirited

Answer 3

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)?

Reginareginald

It might be best to set the (x, y) coordinates of the text to (0, 0), then do the rotation, and then the translation: transform="rotate(90,100,100) translate(70 30)" – Reginareginald