Aprende como xirar en SVG

Gráfica vectorial escalable Rotar función

Ao rotar unha imaxe, cambiarase o ángulo en que se mostra a imaxe. Para gráficos simples, isto pode engadir algunha variedade e interese para o que de outra forma pode ser unha imaxe simple ou aburrida. Como con todas as transformacións, xira obras como parte dunha animación ou por un gráfico estático. Aprender a usar rotar en SVG ou Scalable Vector Graphics permítelle pedir un ángulo distinto ao deseño da súa forma. A función de rotación de SVG funciona para converter a imaxe en calquera dirección.

Sobre rotar

A función de rotación ten que ver co ángulo do gráfico. Cando desexas unha imaxe SVG , crearás un modelo estático que seguramente estará nun ángulo tradicional. Por exemplo, un cadrado terá dous lados ao longo do eixe X e dous a través do eixe Y. Con xirar, pode tomar ese mesmo cadrado e convertelo nunha formación de diamante.

Con tan só un efecto, pasou dun cadro moi típico (que é súper común en sitios web) ata un diamante, que non é común en absoluto e que non engadiu algunha variedade visual interesante a un deseño. Rotar tamén forma parte das capacidades de animación en SVG. Un círculo pode cambiar constantemente ao mostrarse. Este movemento pode chamar a atención dos visitantes e axudar a centrar a súa experiencia en área ou elementos clave nun proxecto.

Xire os traballos sobre a teoría de que un punto na imaxe permanecerá fixa. Imaxina un anaco de papel adxunto ao cartón cun pin-up. A localización do PIN é o punto fixo. Se xira o papel agarrando un bordo e xiralo en sentido horario ou no sentido contrario ás agullas do reloxo, o teclado non se move nunca, pero o rectángulo aínda cambia de ángulo. O papel rotará, pero o punto fixo do pin permanece inalterado. Isto é moi semellante ao funcionamento da función de rotación.

Xirar sintaxe

Con xirar, listas o ángulo do xiro e as coordenadas da área fixa.

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

O ángulo da rotación é o primeiro que engades. Neste código, o ángulo de rotación é de 45 graos. O punto central é o que engadirías a continuación. Aquí, ese punto central sitúase nas coordenadas 100, 100. Se non ingresas as coordenadas de posición central, terán por defecto 0,0. No exemplo de embaixo, o ángulo aínda sería de 45 graos, pero dado que o punto central non se estableceu, será predeterminado a 0,0.

transform = "xirar (45)"

Por defecto, o ángulo vai cara á dereita do gráfico. Para xirar a forma na dirección oposta, usa un signo menos para listar un valor negativo.

transform = "xirar (-45)"

A rotación de 45 graos é un cuarto de quenda xa que os ángulos están baseados nun círculo de 360 ​​graos. Se listas a revolución como 360, a imaxe non cambiaría porque estás literalmente lanzándolle un círculo completo, polo que o resultado final sería idéntico en aparencia a onde comezaches.