SVG en HTML5

Inicio / Tema / SVG en HTML5 / Coordenadas y Posicionamiento en SVG

Coordenadas y Posicionamiento en SVG

En este capítulo, aprenderemos cómo funciona el sistema de coordenadas en SVG y cómo posicionar elementos con precisión. Comprender el sistema de coordenadas es fundamental para crear gráficos organizados y controlados, especialmente cuando se trabaja con gráficos complejos o animaciones.

El Sistema de Coordenadas en SVG

El sistema de coordenadas en SVG utiliza un eje X y un eje Y, similar al sistema de coordenadas cartesiano. Por defecto, el origen (0,0) se encuentra en la esquina superior izquierda del área SVG. Esto significa que el valor de x aumenta hacia la derecha y el valor de y aumenta hacia abajo.

html

"En este ejemplo SVG, se crea un área de 200 por 200 píxeles con un borde negro. Dentro del área SVG, tenemos dos círculos: uno en la posición 50, 50 y otro en la posición 150, 150. El primer círculo es azul y el segundo es verde."

El código anterior define dos círculos en diferentes posiciones, ilustrando cómo las coordenadas cx y cy funcionan dentro del espacio SVG.

Unidades y Escalado en SVG

SVG permite usar diferentes tipos de unidades, como píxeles (px), puntos (pt), y porcentaje (%). La elección de unidades puede afectar cómo se escala el gráfico en diferentes pantallas o cuando se agranda el área SVG.

html

"Este código SVG crea un rectángulo de color naranja. Su posición es de 10, 10 desde la esquina superior izquierda del SVG. El ancho del rectángulo es del 80% del área SVG, y su altura es de 180 píxeles."

En este caso, el rectángulo se ajustará al ancho del contenedor donde se incluya el SVG, siendo flexible y adaptándose al tamaño disponible.

ViewBox: Controlando el Área de Visualización

El atributo viewBox es uno de los más importantes en SVG para definir una "ventana" a través de la cual se observa el contenido SVG. viewBox nos permite escalar y ajustar el contenido independientemente del tamaño físico del SVG.

La sintaxis de viewBox es:

html

min-x y min-y: Coordenadas del punto superior izquierdo del área visible.
width y height: Tamaño de la vista.

Ejemplo con `viewBox`

html

"En este ejemplo, creamos un SVG con un tamaño de 200 por 100 píxeles. Sin embargo, el viewBox está establecido en 0, 0, 100, 50, lo que significa que el círculo de 20 píxeles de radio se ajusta para adaptarse a la vista definida. El círculo está centrado en la posición 50, 25."

Este viewBox de 0 0 100 50 establece una vista que muestra solo una porción del área total, permitiendo escalar el círculo en función de ese espacio reducido.

Ajustando el Origen y los Ejes de Coordenadas

En SVG, es posible modificar el origen y orientar los ejes utilizando transformaciones. Esto es especialmente útil cuando se desea crear gráficos complejos o animaciones que requieren un cambio en la referencia del sistema de coordenadas.

Ejemplo de Transformación con `translate`

html

"Aquí creamos un rectángulo dentro de un elemento grupo o g en SVG, el cual es trasladado a la posición 50, 50. El rectángulo, de 100 por 100 píxeles, se dibuja en azul claro dentro del área SVG, movido desde su posición original."

En este ejemplo, el grupo <g> aplica una transformación translate que mueve el rectángulo a una nueva posición. Esto permite ajustar la posición de elementos en relación a un punto específico dentro del área SVG.

Conclusión

El sistema de coordenadas en SVG es un aspecto fundamental para diseñar gráficos de precisión. Desde el uso de unidades y escalado, hasta el control de la vista con viewBox, estos conceptos son esenciales para cualquier desarrollador que trabaje con SVG en la web. En el siguiente capítulo, exploraremos cómo aplicar estilos en SVG con CSS, permitiéndonos enriquecer la apariencia visual de nuestros gráficos.

¡Nos vemos en el próximo capítulo!

Volver al capítulo anterior

Marcar como leìdo y continuar

Pregúntame lo que sea