7

I have the text with textContent "Design" and text-anchor as start, that was transformed with css to be rotated 45 degree. so it get rotated. problem is that i need to adjust the (x,y)position of the text after my rotation to display the text between the tick as shown in the Expected figure. How can i achieve this.

Result: http://imageshack.us/content_round.php?page=done&l=img404/2711/result1h.png

Expected: http://imageshack.us/content_round.php?page=done&l=img266/5138/expected1.png

    <svg>
    <text x="100" y="100" width="64" height="16" fill="black" transform="rotate(45,100,100)" text-anchor="start">Design</text>
    </svg>

Thanks Gowri

Code Break
  • 137
  • 1
  • 2
  • 7

2 Answers2

15

The text needs to be centered horizontally and vertically so rotation won't move it:

<text x="100" y="50" text-anchor="middle"
    dominant-baseline="central" transform="rotate(0, 100, 50)"></text>

text-anchor aligns the text horizontally
dominant-baseline aligns the text vertically

svg {
    width: 200px; height: 100px;
    text-align: center;
    border: solid 1px blue;
    font-family: monospace;
}
<svg>
    <text x="100" y="50" text-anchor="middle" dominant-baseline="central" transform="rotate(180, 100, 50)">
       Hello World
   </text>
    <text x="100" y="50" text-anchor="middle" dominant-baseline="central" transform="rotate(0, 100, 50)">
       Hello World
   </text>
</svg>

example: http://jsfiddle.net/e4bAh/131/

Mingwei Samuel
  • 2,917
  • 1
  • 30
  • 40
  • 2
    Much simpler than every answer I've seen elsewhere, and it is the most accurate! Thanks for the jsfiddle – kevlarr Oct 09 '17 at 19:01
6

use transform="rotate(45, cx, cy)"

Where cx, cy are the co-ordinates of the center of screen (or rotation).

This is a good example

Dan
  • 9,391
  • 5
  • 41
  • 73
user2415826
  • 61
  • 1