|SVG Simple Example|
|SVG in Web Browsers|
|SVG Coordinate Space|
|SVG and CSS|
It is possible to transform the shapes created in an SVG image. For instance, scale and rotate the shapes. This is a handy way of displaying vertical or diagonal text. Here is a simple example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="50" y="50" height="110" width="110" style="stroke:#ff0000; fill: #ccccff" transform="translate(30) rotate(45 50 50)" > </rect> <text x="70" y="100" transform="translate(30) rotate(45 50 50)" >Hello World</text> </svg>
Here is the resulting image:
The transformation is determined by the
transform attribute of the
<text> elements. You can apply the
transform attribute to all
The transformation in the above example consists of two steps:
First the two shapes are moved 30 pixels in the x-direction. This is done by the
"function" call in the
transform attribute. If you wanted to move the shape in both x- and y-direction,
you would write
translate(30 70) where 30 is the x-direction and 70 is the y-direction.
Second the two shapes are rotated 45 degrees. This is done using the
rotate(45 50 50) "function"
call inside the
transform attribute. The first number, 45, is the number of degrees to rotate
the shape. The second and third numbers are x,y of the point you want to rotate around. Here the shapes
are both rotated around the point 50,50.
There are more transformations possible than translation and rotation. You can check them out in the SVG specification at w3c.org