Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Rotate the whole text with transform

<svg width="350" height="350" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" border="black"
     style="fill:white;stroke-width:3;stroke:black" />
  <text x="10" y="60" font-size="30" text-anchor="start" fill="blue" transform="rotate(0, 0, 0)">Some rotated text</text>
  <text x="10" y="60" font-size="30" text-anchor="start" fill="red" transform="rotate(90, 10, 60)">Some rotated text</text>
</svg>

Text No Fill

  • transform rotate(angle [, cx, cy])

Rotates the element by angle degrees clockwise. If you provide cx and cy, it rotates around that point; otherwise, it rotates around the origin (0,0).

<svg width="500" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" border="black"
     style="fill:white;stroke-width:3;stroke:black" />
  <text x="10" y="60" font-size="30" text-anchor="start" fill="blue">Some moved text</text>
  <text x="10" y="60" font-size="30" text-anchor="start" fill="red" transform="translate(50, 20)">Some moved text</text>
</svg>

Text No Fill

  • translate(tx [, ty])

Moves (shifts) the element by tx units horizontally and ty units vertically. If ty is omitted, it's assumed to be 0.