Més informació sobre com girar a SVG

Gràfics vectorials escalables Rotate Function

Si gira una imatge, canviarà l'angle en què es mostra aquesta imatge. Per a gràfics simples, això pot afegir varietat i interès a la que d'altra manera podria ser una imatge senzilla o avorrit. Igual que amb totes les transformacions, gira les obres com a part d'una animació o d'un gràfic estàtic. Aprendre a utilitzar rotar en SVG, o gràfics vectorials escalables , us permet demanar un angle diferent al disseny de la vostra forma. La funció de gir de SVG funciona per girar la imatge en qualsevol direcció.

Sobre Gira

La funció de gir es refereix a l'angle del gràfic. Quan dissenyeu una imatge SVG , crearà un model estàtic que probablement se situarà en un angle tradicional. Per exemple, un quadrat tindrà dos costats al llarg de l'eix X i dos al llarg de l'eix Y. Amb la rotació, podeu agafar aquesta mateixa casella i convertir-la en una formació de diamants.

Amb només un efecte, heu passat d'un quadre molt típic (que és super comun en llocs web) a un diamant, que no és comú i que no ha afegit una varietat visual interessant a un disseny. Girar també forma part de les capacitats d'animació de SVG. Un cercle pot canviar constantment mentre es mostra. Aquesta proposta pot cridar l'atenció dels visitants i ajudar-vos a centrar la seva experiència en un àrea o elements clau en un disseny.

Gireu els treballs sobre la teoria que un punt sobre la imatge es mantindrà fix. Imagineu un tros de paper adossat al cartró amb un polsador. La ubicació del pin és el lloc fix. Si gireu el paper agafant una vora i girándolo en un moviment de les agulles del rellotge o en el sentit de les agulles del rellotge, el botó no es mou mai, però el rectangle continua canviant els angles. El paper girarà, però el punt fix del pin no es modifica. Això és molt similar al funcionament de la funció de rotació.

Gira sintaxi

Amb girar, enumera l'angle del gir i les coordenades de l'àrea fixa.

transform = "rotate (45,100,100)"

L'angle de la rotació és el primer que afegiu. En aquest codi, l'angle de rotació és de 45 graus. El punt central és el que afegireu a continuació. Aquí, aquest punt central s'asseu a les coordenades 100, 100. Si no introduïu les coordenades de la posició central, s'efectuaran per defecte a 0,0. En l'exemple següent, l'angle encara seria de 45 graus, però ja que el punt central no s'ha establert, serà de 0,0.

transform = "girar (45)"

Per defecte, l'angle es dirigeix ​​cap a la dreta del gràfic. Per girar la forma en sentit contrari, s'utilitza un signe menys per a mostrar un valor negatiu.

transform = "rotate (-45)"

Una rotació de 45 graus és un quart de volta ja que els angles es basen en un cercle de 360 ​​graus. Si enumera la revolució com a 360, la imatge no canviaria perquè literalment ho fessin en un cercle complet, de manera que el resultat final seria idèntic a l'aparença a on vau començar.