Aprenda a rotar gráficos en SVG

Función de rotación de gráficos vectoriales escalables Girar una imagen 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 de otro modo sería una imagen sencilla o aburrida.

Función de rotación de gráficos vectoriales escalables

Girar una imagen 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 de otro modo sería una imagen sencilla o aburrida. Como 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 SVG funciona 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 ubicará 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 ese único efecto, 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 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. Esta moción puede llamar la atención de los visitantes y ayudarlo a enfocar su experiencia en áreas o elementos clave de un diseño.

Rotar funciona según la teoría de que un punto en la imagen permanecerá fijo. Imagine un trozo de papel unido 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 sentido horario o antihorario, el pasador nunca se mueve, pero el rectángulo aún cambia de ángulo. El papel girará, pero el punto fijo del alfiler permanece sin cambios. Esto es muy similar a cómo funciona la función de rotación.

Girar sintaxis

Con rotar, enumera el ángulo del giro y las coordenadas del área fija.

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

El ángulo de rotación es lo primero que agrega. En este código, el ángulo de rotación es de 45 grados. El punto central es lo que agregaría a continuación. Aquí, ese punto central se encuentra en las coordenadas 100, 100. Si no ingresa las coordenadas de la posición central, su valor predeterminado será 0,0. En el siguiente ejemplo, el ángulo seguiría siendo de 45 grados, pero como el punto central no se ha establecido, el valor predeterminado será 0,0.

 transform = "rotate (45)" 

Por defecto, el ángulo va hacia el lado derecho del gráfico. Para rotar la forma en la dirección opuesta, use un signo menos para enumerar 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 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ó.

Rate article
labsfabs.com
Add a comment