- skewX() en skewY() (uitrekken en hellen)
- scale() (schalen en spiegelen)
- translate() (x en y wijzigen)
- 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).
;){kind=link}
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).
;){kind=link}
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).
;){kind=link}
|
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).
;){kind=link}
| Ga naar het volgende hoofdstuk: animaties |
|