Al rotar una imagen, se cambiará el ángulo en el que se muestra esa imagen. Para gráficos simples, esto puede agregar cierta variedad e interés a lo que podría ser una imagen sencilla o aburrida. Al igual que con todas las transformaciones, rotar funciona como parte de una animación o para un gráfico estático. Aprender a usar Rotar en SVG, o gráficos vectoriales escalables, le permite solicitar un ángulo distinto al diseño de su forma. La función de rotación de SVG trabaja para girar la imagen en cualquier dirección.
Acerca de Rotar
La función de rotación tiene que ver con el ángulo del gráfico. Cuando diseñe una imagen SVG, creará un modelo estático que probablemente se asiente en un ángulo tradicional. Por ejemplo, un cuadrado tendrá dos lados a lo largo del eje X y dos a lo largo del eje Y. Con rotar, puedes tomar ese mismo cuadrado y convertirlo en una formación de diamante.
Con solo ese efecto, ha pasado de una caja muy típica (que es muy común en los sitios web) a un diamante, que no es nada común y que no ha agregado una variedad visual interesante a un diseño. Rotar también es parte de las capacidades de animación en SVG. Un círculo puede girar constantemente mientras se muestra. Este movimiento puede atraer la atención de los visitantes y ayudarlo a enfocar su experiencia en áreas o elementos clave en un diseño.
Rotar funciona según la teoría de que un punto de la imagen permanecerá fijo. Imagina una hoja de papel pegada al cartón con un alfiler. La ubicación del pin es el punto fijo. Si gira el papel agarrando un borde y girándolo en el sentido de las agujas del reloj o en sentido contrario, el alfiler de empuje nunca se mueve, pero el rectángulo todavía cambia de ángulo. El papel girará, pero el punto fijo de la clavija no cambia. Esto es muy similar a cómo funciona la función de rotación.
Rotar la sintaxis
Con la rotación, se indica el ángulo del giro y las coordenadas del área fija.
transform = "rotate (45,100,100)"
El ángulo de rotación es lo primero que añades. En este código, el ángulo de rotación es de 45 grados. El punto central es lo que agregarías a continuación. Aquí, ese punto central se encuentra en las coordenadas 100, 100. Si no ingresa las coordenadas de la posición central, se establecerán de manera predeterminada en 0,0. En el siguiente ejemplo, el ángulo aún sería de 45 grados, pero como el punto central no se ha establecido, el valor predeterminado será 0,0. transformar "rotar (45)"
Por defecto, el ángulo se dirige hacia el lado derecho del gráfico. Para rotar la forma en la dirección opuesta, utiliza un signo menos para enumerar un valor negativo. transform = "rotar (-45)"
Una rotación de 45 grados es un cuarto de giro, ya que los ángulos se basan en un círculo de 360 grados. Si enumera la revolución como 360, la imagen no cambiaría porque literalmente la está volteando en un círculo completo, por lo que el resultado final sería idéntico en apariencia al lugar donde comenzó.
