En SVG tenemos formas muy específicas de crear líneas e incluso conectarlas creando polígonos. Para ello, utilizaremos una serie de etiquetas que veremos en esta tabla a continuación:
| Elemento | Descripción |
|---|---|
<line> | Crea una línea que conecta dos puntos A y B. |
<polyline> | Crea una línea que conecta dos o más puntos. Generalmente, es una forma abierta. |
<polygon> | Crea una línea que conecta dos o más puntos. El último conecta con el primero, resultando una forma cerrada. |
Veamos como usar cada una de ellas.
El elemento <line>
Los atributos aplicables a una etiqueta <line> son los siguientes:
| Atributo | Valor por defecto | Descripción | Más info |
|---|---|---|---|
x1 | 0 | La posición en el eje X (horizontal) del punto A o primer punto. | |
y1 | 0 | La posición en el eje Y (vertical) del punto A o primer punto. | |
x2 | 0 | La posición en el eje X (horizontal) del punto B o último punto. | |
y2 | 0 | La posición en el eje Y (vertical) del punto B o último punto. | |
pathLength | none | Tamaño total de la línea. | - |
De esta forma, si creamos una línea, tenemos que establecer las coordenadas del primero punto o punto A, que serían (x1,y1) y las coordenadas del último punto o punto B, que serían (x2,y2). El navegador dibujará la línea que conecta el primer punto con el último.
Líneas
Veamos un ejemplo para crear una línea siguiendo los consejos anteriores:
<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
<line x1="0" y1="0" x2="50" y2="50" stroke="indigo" />
</svg>
En este caso, hemos dibujado una línea partiendo desde el punto (0,0) hasta el punto (50,50), o lo que es lo mismo, desde la esquina superior izquierda hasta el centro del lienzo. Observa también, que como es una línea, hemos utilizado stroke para darle color al trazo, ya que el fill (relleno) no tendría efecto.
El elemento <polyline>
Es posible que queramos crear una forma compuesta de múltiples líneas, y estar creando múltiples elementos <line> no es algo muy cómodo. Para ello, tenemos la etiqueta <polyline> que nos permite hacer exactamente lo mismo que hacíamos con <line> pero indicando múltiples puntos.
Los atributos que tiene este elemento son los siguientes:
| Atributo | Valor por defecto | Descripción | Más info |
|---|---|---|---|
points | vacío | Una lista de puntos x,y separados por espacio. | |
pathLength | none | Tamaño total del trazo de las líneas. | - |
En lugar de utilizar los atributos x1, y1, x2, y2, utilizamos el atributo points y establecemos las coordenadas en él, separadas por espacio. Cada par x e y se separará con una coma.
Polígono abierto
Veamos un ejemplo del trazo que hicimos con la etiqueta <line> anteriormente. Ese mismo ejemplo, se podría hacer con <polyline> de la siguiente forma. Recuerda que los puntos son (0,0) y (50,50):
<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
<polyline points="0,0 50,50" stroke="indigo" />
</svg>
Ahora, podemos ampliar esos puntos y hacer trazos formados por más líneas. Observa el siguiente código de ejemplo en el que tomamos el ejemplo anterior y añadimos 3 líneas más:
<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
<polyline points="0,0 50,50 100,0 100,100 0,100" fill="none" stroke="indigo" />
</svg>
- 📏 La primera línea va desde el punto
(0,0)hasta el punto(50,50). - 📏 La segunda línea va desde el punto
(50,50)hasta el punto(100,0). - 📏 La tercera línea va desde el punto
(100,0)hasta el punto(100,100). - 📏 La cuarta línea va desde el punto
(100,100)hasta el punto(0,100).
Observa también que hemos establecido el atributo fill a none para que no pinte el interior de la forma dibujada con ese trazo, cosa que es posible. Prueba a ponerle un color al atributo fill y ver como lo rellena. Pero vamos a modificar un poco este último ejemplo para provocar que las lineas se crucen y ver como se comporta el relleno.
Este es el mismo ejemplo anterior, pero con algunos cambios:
<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
<polyline points="0,0 50,50 100,0 100,100 50,100 50,0" fill="deeppink" stroke="indigo" />
</svg>
- 📏 La cuarta línea va desde el punto
(100,100)hasta el punto(50,100). - 📏 La quinta línea va desde el punto
(50,100)hasta el punto(50,0). - 🎨 Hemos establecido el atributo
filladeeppink.
Observa que ahora, la quinta línea se cruza con otras líneas en el punto central, por lo que si rellenamos con color, veremos que hay zonas que se rellenan y otras que no. Esto hay que tenerlo en cuenta porque se rellenan en base al primer punto, aunque no hayamos colocado la línea de cierre (0,0).
El elemento <polygon>
La etiqueta <polygon> nos permite crear una forma similar a la que creamos con <polyline>, pero la diferencia es que <polygon> se encarga de añadir la última línea automáticamente para cerrar la forma del polígono.
Los atributos que tiene este elemento son los siguientes:
| Atributo | Valor por defecto | Descripción | Más info |
|---|---|---|---|
points | vacío | Una lista de puntos x,y separados por espacio. Conecta el último con el primero. | |
pathLength | none | Tamaño total del trazo de las líneas. | - |
Como puedes ver, es exactamente igual que <polyline>, la diferencia es que el navegador conecta el último punto con el primero y cierra la forma poligonal.
Polígono cerrado
Observa que este caso, es igual a uno de los anteriores, la diferencia es que <polygon> dibuja el trazo de cierre, aunque no esté indicado en el atributo points:
<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
<polygon points="0,0 50,50 100,0" fill="deeppink" stroke="indigo" />
</svg>
Observa que el siguiente caso, basado en uno anterior, no dibujamos el trazo final para conectar con el primer punto, y el navegador con <polygon> lo cierra y lo dibuja:
<svg viewBox="0 0 100 100" width="275" height="275" style="background:#aaa">
<polygon points="0,0 50,50 100,0 100,100 0,100" fill="none" stroke="indigo" />
</svg>
