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>
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>
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.