Rotazione
Ruotare di un certo angolo alfa, con (0,0) punto fisso
1 |
<elemento ... transform="rotate(alfa)">...</elemento> |
Rotazione di 30 gradi in senso orario
1 |
<rect x="200" y="200" width = "200" height = "50" transform="rotate(30)" /> |
Rispetto a un punto
Ruotare di un certo angolo alfa rispetto a (cx,cy)
1 |
<elemento ... transform="rotate(alfa,cx,cy)">...</elemento> |
Rotazione di 30 gradi in senso orario rispetto al primo vertice del rettangolo
1 |
<rect x="200" y="200" width = "200" height = "50" transform="rotate(30,200,200)" /> |
Rotazione di 30 gradi in senso orario rispetto al centro del rettangolo
1 |
<rect x="200" y="200" width = "200" height = "50" transform="rotate(30,300,225)" /> |
Tutte
Diversi rettangoli
- nero, nessuna rotazione
- blu, 30 gradi rispetto all’origine
- verde, -30 gradi rispetto all’origine
- rosso, 30 gradi rispetto al primo vertice
- magenta, -30 gradi rispetto al primo vertice
- arancio, 30 gradi rispetto al centro del rettangolo
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0" ?> <svg xmlns = "http://www.w3.org/2000/svg"> <g style="stroke-width:2;fill:none"> <circle r="282.84" stroke="gray"/> <rect x="200" y="200" width = "200" height = "50" stroke="black" /> <rect x="200" y="200" width = "200" height = "50" stroke="blue" transform="rotate(30)" /> <rect x="200" y="200" width = "200" height = "50" stroke="green" transform="rotate(-30)" /> <rect x="200" y="200" width = "200" height = "50" stroke="red" transform="rotate(30,200,200)" /> <rect x="200" y="200" width = "200" height = "50" stroke="magenta" transform="rotate(-30,200,200)" /> <rect x="200" y="200" width = "200" height = "50" stroke="orange" transform="rotate(30,300,225)" /> </g> </svg> |