Cómo girar elementos en SVG

Cómo girar elementos en SVG

Cómo girar elementos en SVG

VALORACIÓN DEL ARTÍCULO:
5/5


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.

TAMBIÉN TE INTERESA

errores SEO más comunes

Los 10 errores SEO que más se están cometiendo en la actualidad

Respetando a todos los buscadores del momento y a la trascendencia que tienen hoy otras fuentes como TikTok para la promoción de productos y servicios, Google sigue siendo el rey a la hora de encontrar algo en internet. Por tanto, quien quiera posicionar tiene que mirar sí o sí a la principal fuente de respuestas

Thermomix TM7

Llega la Thermomix TM7: más innovadora y tecnológica que nunca

Como usuario del robot de cocina más famoso de todos los tiempos, este fin de semana me quedé parado tras recibir un mail de Vorwerk, anunciado el lanzamiento de la Thermomix TM7, la actualización de una máquina que me ha tantas y tantas alegrías y facilidades para la gastronomía. Y con solo ver las imágenes

seguridad de los datos personales

Descuidos en tu día a día que comprometen la seguridad de los datos personales

Hoy es el Día de Internet Segura, una jornada para concienciar a los usuarios sobre la importancia de cuidar la seguridad de los datos personales. La seguridad en Internet se ha convertido en una prioridad global para todos, amén del creciente número de robos virtuales e intrusiones de los delincuentes a la información sensible de

planes de entrenamiento con IA

La era de los gimnasios smart y los planes de entrenamiento con IA

El sector de los gimnasios está empezando a introducir la tecnología para sus usuarios. Los planes de entrenamiento con IA ya son una realidad en espacios como los de Metropolitan. Es cuestión de tiempo que toda la innovación que viene de la tecnología comience a aterrizar en nuestras vidas para cuidar nuestro cuerpo. De hecho,