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.
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:
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"> 04: 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> 15: 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)" /> 22: 23: </svg> 24:
