Si può agire sugli elementi con delle trasformazioni geometriche
Traslazione
Traslare rispetto agli assi di dx e dy
|
1 |
<elemento ... transform="translate(dx,dy)">...</elemento> |
==Esempi==
Un rettangolo traslato a destra di 350
|
1 |
<rect width="100" height="50" transform="translate(350,0)" /> |
… in basso di 200
|
1 |
<rect width="100" height="50" transform="translate(0,200)" /> |
… in basso a destra…
|
1 |
<rect width="100" height="50" transform="translate(350,200)" /> |
Scalatura
Scalare le dimensioni rispetto agli assi di dx e dy.
In realtà scala anche x, y, stroke-width, …
|
1 |
<elemento ... transform="scale(dx,dy)">...</elemento> |
Un rettangolo scalata in orizzontale di un fattore 3
|
1 |
<rect width="100" height="50" transform="scale(3,0)" /> |
… in verticale di un fattore 2
|
1 |
<rect width="100" height="50" transform="scale(0,2)" /> |
… in orizzontale e in verticale
|
1 |
<rect width="100" height="50" transform="scale(3,2)" /> |
Tutte
Tutti i rettangoli avrebbero le stesse dimensioni e spessore ma
- il rettangolo nero rimane nell’origine
- i rettangoli blu, verde e magenta sono scalati
- i 3 rettangoli rossi sono traslati
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?xml version="1.0" ?> <svg xmlns = "http://www.w3.org/2000/svg"> <g style="stroke-width:2;fill:none"> <rect width="100" height="50" stroke="black" /> <rect width="100" height="50" stroke="blue" transform="scale(2,1.5)" /> <rect width="100" height="50" stroke="green" transform="scale(1.5,2)" /> <rect width="100" height="50" stroke="magenta" transform="scale(3,3)" /> <rect width="100" height="50" stroke="red" transform="translate(350,0)" /> <rect width="100" height="50" stroke="red" transform="translate(350,200)" /> <rect width="100" height="50" stroke="red" transform="translate(0,200)" /> </g> </svg> |