La rotazione di un'immagine modifica l'angolo a cui viene visualizzata l'immagine. Per una grafica semplice, questo può aggiungere varietà e interesse a ciò che altrimenti potrebbe essere un'immagine semplice o noiosa. Come con tutte le trasformazioni, ruotare funziona come parte di un'animazione o di un'immagine statica. Imparare a usare ruotare in SVG, o Scalable Vector Graphics, ti permette di richiedere un angolo distinto rispetto al design della tua forma. La funzione di rotazione SVG funziona per trasformare l'immagine in entrambe le direzioni.
Informazioni su Ruota
La funzione di rotazione riguarda l'angolo del grafico. Quando si progetta un'immagine SVG, si crea un modello statico che probabilmente si troverà in un angolo tradizionale. Ad esempio, un quadrato avrà due lati lungo l'asse X e due lungo l'asse Y. Con la rotazione, puoi prendere lo stesso quadrato e trasformarlo in una formazione di diamanti.
Con un solo effetto, sei passato da una scatola molto tipica (che è molto comune sui siti web) a un diamante, che non è affatto comune e che non ha aggiunto alcuna interessante varietà visiva a un design. Ruota fa anche parte delle capacità di animazione in SVG. Un cerchio può girare costantemente mentre viene visualizzato. Questa mozione può attirare l'attenzione dei visitatori e aiutarvi a focalizzare la loro esperienza su un'area chiave o elementi in un design.
Ruota funziona sulla teoria che un punto sull'immagine rimarrà fisso. Immagina un pezzo di carta attaccato al cartone con un puntale. La posizione pin è il punto fisso. Se si gira la carta afferrando un bordo e ruotandolo in senso orario o antiorario, il pulsante non si sposta mai, ma il rettangolo cambia ancora angoli. La carta girerà, ma il punto fisso del pin rimane invariato. Questo è molto simile a come funziona la funzione di rotazione.
Ruota Sintassi
Ruotando, elencherai l'angolo della svolta e le coordinate dell'area fissa.
trasformare = "rotate (45.100.100)"
L'angolo della rotazione è la prima cosa che aggiungi. In questo codice, l'angolo di rotazione è 45 gradi. Il punto centrale è ciò che vorresti aggiungere in seguito. Qui, il punto centrale si trova alle coordinate 100, 100. Se non si inseriscono le coordinate della posizione centrale, verranno impostate su 0,0. Nell'esempio seguente, l'angolo sarebbe comunque di 45 gradi, ma poiché il punto centrale non è stato stabilito, verrà impostato su 0,0. trasformare = "rotate (45)"
Di default, l'angolo va verso il lato destro del grafico. Per ruotare la forma nella direzione opposta, si utilizza un segno meno per elencare un valore negativo. trasformare = "rotate (-45)"
Una rotazione di 45 gradi è un quarto di giro poiché gli angoli si basano su un cerchio di 360 gradi. Se elencherai la rivoluzione come 360, l'immagine non cambierà perché la stai letteralmente ribaltando in un cerchio completo, quindi il risultato finale sarebbe identico nell'aspetto a dove hai iniziato.
