Tutorial SVG 11: SVG transformations

svg elementen

SVG transformations as there are the translation, the rotation, scaling, skewing and matrix transforms are defined by the transform attribute, which we can add to most of the SVG element, like for example the rectangle, the circle etc. The values of the transform properties are the following transform functions:

  • translate() - moves an object to a new position
  • scale() - scales an object to a larger or a smaller one.
  • rotate() - rotates an object around the origin of the coordinate system or around another defined point
  • skewX() - skews an object horizontally
  • skewY() - skews an object vertically
  • matrix() - performs one of the above or combination of the above transformations by means of matrix calculations For transformation matrices see the CSS3 Tutorial: matrix transformations. The matrices mentioned there are also applicable on SVG transformations.

When a transformation is applied on an object in the coordinate system, a new coordinate system is created. Compare this to a movement (transformation) of an object on a table. If you move the object on the table, not only the object is moved, but the whole table including the object on the table. This has consequences for the next transformation on the same object. Not only has the position of the object changed, but also the position of the coordinate system, and in some cases the position of the origin. The origin plays an important role in the rotate() function (being a parameter) as you can see in example 5.

Example1: simple SVG transformations

Let's start with some simple examples of the above mentioned transformations

<svg width="700px" height="700px">
    <text x="30px" y="50px">
    	Non-transformed text.
    </text>
    <text x="30px" y="50px" transform="translate(220,0)">
    	Horizontally translated  text.
    </text>
    <text x="30px" y="50px" transform="translate(0,100)">
    	Vertically translated text.
    </text>
    <text x="310px" y="210px" transform="rotate(315,270, 180)">
    	Rotated Text
    </text>
    <text x="-220px" y="260px" transform="skewX(45)">
    	Text skewed in x-direction
    </text> 
    <text x="270px" y="100px" transform="skewY(25)">
    	Text skewed in y-direction
    </text>
    <text x="5px" y="80px" transform="scale(5)">
    	Scaled  text.
    </text>
</svg>
simple SVG transformations
SVG transformations

Check this example in your browser

Example2: Transformations on the <g> element.

Transformations can also be applied on "grouped" <g> elements,

<svg width="600px" height="440px">
  <g>
      <rect x="10px" y="10px" width="300px" height="300px" 
      style="stroke:black; fill:red; stroke-width:20; fill:red; fill-opacity:0.6;"  />
      <text x="120px" y="120px" style="fill:white;font-size:35;">Hello 
        <tspan x="70" dy="70" >rectangular!</tspan>
      </text>
  </g>
  <g transform="translate(200, 120)">
      <rect x="10px" y="10px" width="300px" height="300px" 
      style="stroke:black; fill:red; stroke-width:20; fill:red; fill-opacity:0.6;"  />
      <text x="120px" y="100px" style="fill:white;font-size:35;">Hello 
        <tspan x="80" dy="70" >translated</tspan>
        <tspan x="70" dy="70" >rectangular!</tspan>
      </text>
  </g>
</svg>
Transformations on the <g> element.
Translation on the <g> element.

Check this example in your browser

Example3: Transformations and the <use> element.

When a <g> element or <symbol> element is defined within a <defs> element then it is handy to employ the <use> element to apply a transformation.

<svg width="1000px" height="600px">
<defs>
  <g id="myGroup">
    <rect x="10px" y="10px" width="300px" height="300px" 
    style="stroke:black; fill:red; stroke-width:20; fill:red; fill-opacity:0.6;"  />    
    <text x="120px" y="120px" style="fill:white;font-size:35;">Hello 
    <tspan x="70" dy="70" >rectangular!</tspan>
    </text>
  </g>
</defs>
<use xlink:href="#myGroup" />
<use xlink:href="#myGroup" transform="translate(200, 120)" />
<use xlink:href="#myGroup" transform="translate(0, 120) scale(0.5)" />
</svg>

Employing the <use> element in Transformation
Employing the <use> element in Transformations

Check this example in your browser

Translations

A translation is a movement of an object, horizontally, vertically or diagonal, without rotating it or changing its size or shape. Translations can be executed by means of the translate() function as a value for the transform property, as shown below in the code examples.

Also we can use so called the matrix() function. To enter the right parameters in the matrix function we need to know the transformation matrix associated with a translation (for transformation matrices see the CSS3 Tutorial: matrix transformations. In case you wonder why you need a CSS3 tutorial related to SVG: for CSS and SVG transformations we can make use of the same transformation matrices.

The transformation matrix related to diagonal translations looks as follows

$$ \left( \begin{array}{cc} 1 & 0 & x \\ 0 & 1 & y \\ 0 & 0 & 1 \end{array} \right) $$

where x is the horizontal translation, y is the vertical translation (by default in px). This matrix leads to the matrix functions as shown below in the code examples.

Source code example: horizontal translation.

transform="translate(x-distance)"

or

transform= "matrix(1,0,0,1,x,0)"

Source code example: vertical translation and diagonal translations.

transform="translate(x-distance, y-distance)"

or

transform= "matrix(1,0,0,1,x,y)"

Example4: Translation

<style>
    circle{
    stroke-width:10; 
    fill:darkgrey; 
    fill-opacity:0.6;
    stroke:black;
    fill:purple;
    }
</style>
<?php 
define("A", 20 );
?>
<svg width="700px" height="700px">
    <circle cx="200" cy="200" r="75" style="fill:yellow; stroke-width:0;" 
			 transform="matrix(1,0,0,1,0,0)"/>
    <?php
    for (\$i = 0; \$i <= 20; \$i++) {
    ?>
    <circle cx="200" cy="200" r="50" 
	transform="matrix(1,0,0,1,<?php echo(100*cos(deg2rad((360/17)*\$i)))?>,
							   <?php echo(100*sin(deg2rad((360/17)*\$i)))?>)"/>
    <?php
    }
    ?> 
</svg>
Translation transformations
Translations

Check this example in your browser

Rotations

A rotate() transformation can be executed around the origin (then the x- and y-coordinates parameters are omitted) or around a specific point other than the origin.

Source code example: rotation around the origin

transform="rotate(rotation-angle)"

or


transform= "matrix(cos(θ),sin(θ),-sin(θ),cos(θ),0,0)"

Source code example: rotation around a point other than the origin

transform="rotate(rotation-angle, x-coordinate, y-coordinate)"

Example5: Rotations in steps of 30 degrees around (250,190)

<svg width="1000px" height="700px">
<text x="200px" y="150px" transform="rotate(0, 250,190)"
style="fill:red; stroke:none; font-size:30">
She loves me...
</text>
<text x="200px" y="150px" transform="rotate(30, 250,190)"
style="fill:black; stroke:none; font-size:30">
She loves me not...
</text>
...
<text x="200px" y="150px" transform="rotate(300, 250,190)"
style="fill:red; stroke:none; font-size:30">
She loves me...
</text>
<text x="200px" y="150px" transform="rotate(330, 250,190)"
style="fill:black; stroke:none; font-size:30">
She loves me not...
</text>
</svg>
Rotation transformations
Rotation transformations

Check this example in your browser

Leave a comment