main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:basic:coordinate_transformations

Example for Coordinate Transformations

SVG allows different transformations: translation, rotation, scaling and skewing. The different transformations can be combined and nested. The matrix transformation is able to describe several transformations in one step, by using a 3x3 matrix from which actually only 6 values are used.

In the example on the left side we deal with the same graphics: one object - defined once - with different transformations. Each object instance is translated to a new position.

  • In the first row we used scaling with one or two independent factors. The latter leads to distortion in one dimension.
  • In the second row we used skewing with one or two independent factors. One has to use decimal degrees.
  • In the last row we used rotations. The last example shows an alternative syntax: all statements can be written by using a transformation matrix. Combinations can be accumulated using the rules of matrix calculations. Graphics software often exports SVG-code in this way, resulting in shorter code fragments - however manual interpretation might get more difficult by using this approach.

Files used

Right-click, save ...

Technical Details

Zooming and panning has been disabled for this example.. Another option to transform the whole content of a graphics is to use the viewBox attribute on the <svg /> element as described at www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute. The viewBox approach is also used in our Navigation Tools Tutorial.

Unique definition of the map

<!DOCTYPE svg PUBLIC ... [
In the DOCTYPE section, even before the official SVG-section one can define reusable objects for later use.

<!ENTITY Austria "
An entity (object) with the name Austria is created.

<g transform='translate(-6000,500),scale(0.35)'>
For the following objects we use a group node. This is not necessary, but simplifies maintenance because transformation parameters need to be specified only once for the use on the whole group of objects.

<rect fill='#F5C592' stroke='#1F1A17' stroke-width='3' x='-5614' y='2' width='11036' height='5979'/>
A background rectangle.

<path fill='#7CC5A1' stroke='#604F5E' stroke-width='28' d='M589 1050c19,-85 ... 82,-120z'/>
The polygon defining the shape of Austria, consists partly of Bézier-curves.

  </g>
Closing of the SVG Group element.

">]>
The DOCTYPE (entity defintion) of the embedded object is closed.

The object defined above is presented without transformations:

<g id="norm">&Austria;</g>
The syntax to get an instance of a predefined object is &entityName;.

We use transformations on the objects instance:

<g id="sc05" transform="scale(0.5)">&Austria;</g>
The transformation parameters are attached to the object (element or parent group). Subsequent transformation parameters are separated by , kommas.

...
<g id="sc09" transform="translate(6000,5400),scale(0.7),skewX(-40),skewY(20)">&Austria;</g>
Parameters can be combined individually. The right sequence is crucial to get predictable results due to the mathematical matrix calculations involved.

...
<g id="sc02" transform="matrix(.707 .707 -.707 .707 0 0)">&Austria;</g>
The parameters of a simple rotation -45 degrees. We deal with a 3x3 matrix, from which we use only the first 6 values. The last 3 ones must not be specified for geometric operations (2D transformations).

See also www.w3.org/TR/SVG11/coords.html#TransformAttribute for additional, more detailed remarks on geometric transformations in SVG.



Last modified: Tuesday, 10-Dec-2019 21:40:17 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: https://old.carto.net/papers/svg/samples/matrix.shtml