Transformaties

U kan transformaties toepassen op verschillende tags. Dit doet u met het attribuut transform. De volgende transformaties bestaan:
  1. skewX() en skewY() (uitrekken en hellen)
  2. scale() (schalen en spiegelen)
  3. translate() (x en y wijzigen)
  4. rotate() (draaien)

Het attribuut transform

De waarde van het attribuut transform zijn methoden die van elkaar gescheiden worden met een spatie. Tussen het (-teken en het )-teken van de methode komt een parameter.
transform="scale(0.8) translate(10 100)"

skewX en skewY

Deze methoden gebruikt u bij het uitrekken en hellen van figuren. De parameter (Die tussen haakjes staat) is een getal. skewX helt horizontaal, skewY helt verticaal.
Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100px" height="100px">
<g>
<rect x="10" y="10" width="40" height="40" transform="skewX(6) skewY(8)" fill="blue" stroke="#0ebb00" stroke-width="4" />
</g>
</svg>

(Bekijk dit voorbeeld).

scale

De methode scale() gebruikt u bij het schalen van figuren. Tussen de haakjes plaatst u een getal. De breedte en hoogte van de figuur worden dan vermenigvuldigd met dit getal.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100px" height="100px">
<g>
<rect x="10" y="10" width="40" height="40" transform="scale(1.4)" fill="blue" stroke="#0ebb00" stroke-width="4" />
</g>
</svg>

(Bekijk dit voorbeeld).

translate

Met de methode translate() veranderd u de x -en y-waarden van een figuur. Tussen de haakjes plaatst u een getal dat bij de x-waarde moet worden bijgeteld (of affgetrokken), gevolgd door een komma, gevolgd door het getal dat bij de y-waarde moet worden bijgeteld (of afgetrokken).
Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100px" height="100px">
<g>
<rect x="10" y="10" width="40" height="40" transform="translate(5,5)" fill="blue" stroke="#0ebb00" stroke-width="4" />
</g>
</svg>

(Bekijk dit voorbeeld).
Let op!
U kunt geen maateenheid toevoegen bij tralslate: transformaties zoals transform="translate(10mm,50mm)" gaan niet!

rotate

Met de methode rotate() draait u figuren. Tussen de haakjes komt de hoek waarover de figuur gedraaid wordt.
Bijvoorbeeld:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100px" height="100px">
<g>
<rect x="60" y="10" width="40" height="40" transform="rotate(32)" fill="blue" stroke="#0ebb00" stroke-width="4" />
</g>
</svg>

(Bekijk dit voorbeeld).
Ga naar het volgende hoofdstuk: animaties Valid XHTML 1.0!