Rodar uma imagem altera o ângulo em que essa imagem é exibida. Para gráficos simples, isso pode adicionar alguma variedade e interesse ao que, de outra forma, seria uma imagem direta ou entediante. Como com todas as transformações, girar funciona como parte de uma animação ou para um gráfico estático. Aprender a usar a rotação em SVG ou Scalable Vector Graphics permite que você solicite um ângulo distinto ao design da sua forma. A função de rotação do SVG funciona para girar a imagem em qualquer direção.
Sobre o Rotate
A função de rotação é toda sobre o ângulo do gráfico. Ao projetar uma imagem SVG, você criará um modelo estático que provavelmente ficará em um ângulo tradicional. Por exemplo, um quadrado terá dois lados ao longo do eixo X e dois ao longo do eixo Y. Com a rotação, você pode pegar o mesmo quadrado e transformá-lo em uma formação de diamante.
Com apenas um efeito, você passou de uma caixa muito comum (que é super comum em sites) para um diamante, que não é comum e que não adicionou uma variedade visual interessante a um design. Girar também faz parte das capacidades de animação no SVG. Um círculo pode girar constantemente durante a exibição. Essa moção pode chamar a atenção dos visitantes e ajudá-lo a concentrar sua experiência na área principal ou nos elementos de um design.
Rodar funciona na teoria de que um ponto na imagem permanecerá fixo. Imagine um pedaço de papel preso ao papelão com um alfinete. A localização do pino é o ponto fixo. Se você virar o papel segurando uma borda e girando-a no sentido horário ou anti-horário, o pino nunca se move, mas o retângulo ainda muda de ângulo. O papel irá girar, mas o ponto fixo do pino permanece inalterado. Isso é muito parecido com o funcionamento da função de rotação.
Rodar Sintaxe
Com a rotação, você lista o ângulo da curva e as coordenadas da área fixa.
transformar = "girar (45,100,100)"
O ângulo da rotação é a primeira coisa que você adiciona. Neste código, o ângulo de rotação é de 45 graus. O ponto central é o que você adicionaria a seguir. Aqui, esse ponto central fica nas coordenadas 100, 100. Se você não inserir as coordenadas da posição central, elas serão padronizadas para 0,0. No exemplo abaixo, o ângulo ainda seria de 45 graus, mas como o ponto central não foi estabelecido, o padrão será 0,0. transform = "rotate (45)"
Por padrão, o ângulo vai para o lado direito do gráfico. Para girar a forma na direção oposta, use um sinal de menos para listar um valor negativo. transform = "rotate (-45)"
Uma rotação de 45 graus é um quarto de giro, pois os ângulos são baseados em um círculo de 360 graus. Se você listar a revolução como 360, a imagem não mudaria porque você está literalmente lançando-a em um círculo completo, de modo que o resultado final seria idêntico em aparência ao ponto em que você começou.
