Types of Affine Transformations

List of basic affine transformations:

The following list gives other possible entries in the transform tag:

It is worth remarking that computer scientists work with a different coordinate system than mathematicians: The y-coordinate increases in the downward direction. So, the transformations may not do exactly what you are used to.

Concatenating transformations:

My favorite thing about the transform attribute is that you can concatenate transforms by putting a space in between them. Many of the above types of transforms are illustrated in the following example, followed by translations which move them to a place where you can see them:

image of a circle
Your browser did not display the SVG image. It is showing a standard image as a fallback.
Source of pumpkin-transform.svg:Hide line numbers
01: <svg version="1.1" baseProfile="full"
02:      width="654px" height="480px" viewBox="-102 -112 654 480"
03:      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
05: <defs>
06:    <g id="Pumpkin">
07:       <circle cx="0" cy="0" r="100" fill="orange" stroke="black" stroke-width="1px"/>
08:       <rect x="-10" y="-110" width="20" height="20" fill="darkgreen" stroke="black" stroke-width="1px"/>
09:       <circle cx="-30" cy="-30" r="20" fill="black"/>
10:       <circle cx="30" cy="-30" r="20" fill="black"/>
11:       <polygon points="0,0 20,25 -20,25" fill="black"/>
12:       <line x1="-60" y1="60" x2="60" y2="60" stroke-width="10px" stroke="black"/>
13:    </g>
14: </defs>
16: <use xlink:href="#Pumpkin"/>
17: <use xlink:href="#Pumpkin" transform="translate(225,0) rotate(60)" />
18: <use xlink:href="#Pumpkin" transform="translate(450,0) scale(0.75)" />
19: <use xlink:href="#Pumpkin" transform="translate(0,225) scale(0.25,0.75)" />
20: <use xlink:href="#Pumpkin" transform="translate(225,225) skewX(45)" />
21: <use xlink:href="#Pumpkin" transform="translate(450,225) skewY(45)" />
23: </svg>


This presentation is part of a SVG Tutorial for Mathematics Students.

© 2013 by W. Patrick Hooper. This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Creative Commons License Valid XHTML 1.0 Strict Valid CSS!