Girar una imagen cambiará el ángulo en el que se muestra la imagen. Para gráficos simples, esto puede añadir algo de variedad e interés a lo que de otra manera podría ser una imagen sencilla o aburrida. Como con todas las transformaciones, rotar obras 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 funciona para girar la imagen en cualquier dirección
.
Acerca de Rotar
La función de rotación se refiere al ángulo del gráfico. Cuando diseñe una imagen SVG, va a crear un modelo estático que probablemente se sentará 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 sólo ese efecto, se ha pasado de una caja muy típica (que es muy común en los sitios web) a un diamante, que no es común en absoluto y que no ha añadido una variedad visual interesante a un diseño. Rotar es también parte de las capacidades de animación en SVG. Un círculo puede girar constantemente mientras se muestra. Este movimiento puede llamar la atención de los visitantes y ayudarle a enfocar su experiencia en áreas o elementos clave de un diseño.
Rotar trabaja con la teoría de que un punto de la imagen permanecerá fijo. Imagínate un pedazo de papel pegado al cartón con un alfiler. La ubicación de los pines es el punto fijo. Si gira el papel agarrando un borde y girándolo en sentido horario o antihorario, el pasador nunca se mueve, pero el rectángulo sigue cambiando de ángulo. El papel girará, pero el punto fijo de la aguja permanece inalterado. Esto es muy similar a cómo funciona la función de rotación.
Girar sintaxis
Con rotar, se lista el ángulo de giro y las coordenadas del área fija.
transform="rotate(45,100,100)"El ángulo de rotación es lo primero que se añade. En este código, el ángulo de rotación es de 45 grados. El punto central es lo que añadiría a continuación. Aquí, el punto central está en las coordenadas 100, 100. Si no introduce las coordenadas de la posición central, éstas serán por defecto 0,0. En el siguiente ejemplo, el ángulo seguiría siendo de 45 grados, pero como no se ha establecido el punto central, por defecto será 0,0.
transform="rotate(45)"Por defecto, el ángulo va hacia el lado derecho del gráfico. Para girar la forma en la dirección opuesta, utilice un signo menos para listar un valor negativo.
transform="rotate(-45)"Una rotación de 45 grados es un cuarto de vuelta ya que los ángulos se basan en un círculo de 360 grados. Si enumeras la revolución como 360, la imagen no cambiaría porque literalmente la estás volteando en un círculo completo, por lo que el resultado final sería idéntico en apariencia al lugar donde empezaste.
