Ultima revisión 30/10/2012

Transformaciones en gráficos vectoriales SVG

Cuando dibujamos en SVG se utilizan matrices matemáticas para averiguar en qué parte de la pantalla está el punto. Consideremos, por ejemplo, la posibilidad de un documento con un cuadro de tamaño de 200 por 200 píxeles, pero en una pantalla que es de 100 por 100 píxeles.

El punto (20, 20) debería ser dibujado en (10, 10) en la pantalla para que llevase la misma escala. Esta transformación se produciría para cada punto. Bien, pues el visor SVG funciona de igual manera, haciendo este uso de las matrices matemáticas.

Las matrices matemáticas hacen que muchos tipos de transformaciones se puedan resolver de forma sencilla. Sin embargo, no se pueden hacer transformaciones vectoriales de campo como deformaciones, remolinos o curvas. La especificación SVG tiene una muy buena explicación de cómo funcionan las matrices matemáticas. SVG permite agregar transformaciones usando matrices matemáticas de elementos antes de decidir dónde están los puntos en la pantalla.

El listado de efectos que se establecerá a transform debe realizarse, separando las pseudo-funciones, mediante espacios en blanco y se aplicarán en el orden escrito. Las funciones de transformación se deben incluir dentro del atributo transform de cualquier elemento contenedor ('g', 'svg', 'image') o cualquier forma. Los patrones y gradientes tienen atributos que también aceptan transformaciones.

• translate(x, y)
• scale(sx, sy)
• rotate(ángulo, cx, cy)
• skewX(ángulo)
• skewY(ángulo)
• matrix(a, b, c, d, e, f)

Translate translate(x, y)

El punto x es obligatorio. La y es opcional.

Significa mover el objeto al punto de coordenadas (x, y). Si y no está establecido, entonces se asume que es 0. El uso de un offset en translate es redundante en elementos como "rect ya que x e y ya hacen de offset. A menos que se tengan transformaciones adicionales que no es necesario utilizarlo.

Scale scale(sx, sy)

El punto sx es obligatorio. La sy es opcional.

Significa escalar los puntos a lo largo de los ejes X e Y. Si sy no se utiliza entonces ambos ejes X e Y son escalados por sx.

Rotate rotate(ángulo, cx, cy)

El ángulo es obligatorio. Las coordenadas cx y cy son opcionales.

Significa girar la forma alrededor del punto (cx, cy). Este punto es un desplazamiento de la caja de vista actual. Si cx y cy no se presentan a continuación, la forma se girará alrededor del punto de origen.

SkewX, SkewY skewX(ángulo), skewY(ángulo)

El ángulo es obligatorio.

Significa sesgar a lo largo del eje determinado por la función utilizada. La distancia "sesgada" es el bronceado del ángulo.

Matrix matrix(a, b, c, d, e, f, ...)

Introduce una matriz de transformación directamente.

Esto multiplica directamente una matriz de transformación contra la matriz de transformación actual. Las otras funciones son mucho más fáciles de entender y mucho más fácil de mantener y manipular.

Orden de Operación y jerarquización

Como en las matrices de matemáticas, el orden en que se hacen las transformaciones es importante. Trasladar y rotar da un resultado diferente de rotar y luego trasladar. Las transformaciones también se pueden anidar. Esto se ilustra a continuación. El resultado final en verde no está en la misma posición a pesar de que las mismas transformaciones exactas se utilizaron.