SVG Polyline
En esta página encontrarás información sobre el elemento SVG <polyline>, verás ejemplos de uso y podrás crear uno tú mismo.
El elemento SVG <polyline> dibuja una serie de segmentos de línea recta conectados a través de una lista de puntos. Piensa en él como "unir los puntos" con un trazo continuo: le proporcionas coordenadas y dibuja una línea desde cada punto hasta el siguiente. Es ideal para gráficos de líneas, trazados en zigzag, sparklines y cualquier contorno abierto de múltiples segmentos.
Esta página explica la sintaxis de points, la única regla de estilo que todo principiante aplica mal (fill:none), cómo <polyline> se diferencia de un <polygon> cerrado, y cómo controlar el aspecto de las esquinas y los extremos de línea. Para conocer la familia completa de formas básicas de SVG, consulta la Referencia SVG.
Descripción del elemento <polyline>
El elemento SVG <polyline> crea una forma compuesta únicamente por líneas rectas que conectan múltiples puntos. A diferencia del elemento <polygon> — que dibuja automáticamente un segmento de cierre hasta el primer punto para formar una figura cerrada — un <polyline> es una forma abierta: el último punto no se une de vuelta al primero. Si necesitas un contorno cerrado (un triángulo, hexágono, estrella), utiliza <polygon>. Para formas libres con curvas, usa <path>.
La regla más importante: establece fill:none
Por defecto, toda forma SVG se rellena con negro sólido (fill:black). Para una forma cerrada eso tiene sentido, pero un <polyline> es abierto — y SVG igualmente lo rellena trazando un borde de cierre imaginario e inundando el área encerrada con negro. Este es el error más común entre principiantes: esperas una línea delgada y en su lugar obtienes una mancha negra.
La solución es desactivar explícitamente el relleno con fill:none y apoyarse en stroke para que la línea sea visible:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- WRONG: no fill set, so SVG floods the open shape with black -->
<polyline points="20,20 60,80 100,20 140,80 180,20"
style="stroke:purple;stroke-width:4" />
<!-- RIGHT: fill:none leaves a clean line -->
<polyline points="220,20 260,80 300,20 340,80 380,20"
style="fill:none;stroke:purple;stroke-width:4" />
</svg>
</body>
</html>Casi todos los elementos <polyline> que escribas deberían incluir fill:none.
Ejemplo del elemento SVG <polyline>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="220" >
<polyline points="30,30 50,35 70,50 90,130 130,150 210,190" style="fill:none;stroke:purple;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>La sintaxis de points
El atributo points es una lista plana de pares de coordenadas absolutas, escritas como x,y. Los puntos se dibujan en el orden en que los listas, y cada x,y se mide desde la esquina superior izquierda del sistema de coordenadas del SVG (x crece hacia la derecha, y crece hacia abajo).
SVG es tolerante con los separadores entre números — las comas y los espacios en blanco son intercambiables. Todos estos definen los mismos tres puntos:
points="30,30 50,35 70,50"
points="30 30 50 35 70 50"
points="30,30, 50,35, 70,50"Una convención habitual y legible es colocar una coma dentro de cada par y un espacio entre pares, como en points="30,30 50,35 70,50". Se necesita un número par de coordenadas; un número impar es un error.
Ejemplo del elemento SVG <polyline> con líneas rectas:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200" >
<polyline points="10,50 50,50 50,90 90,90 90,130 130,130 130,170" style="fill:white;stroke:blue;stroke-width:5" />
Sorry, inline SVG is not supported by your browser.
</svg>
</body>
</html>Aquí la escalera se ve bien porque fill:white coincide casualmente con el fondo de la página — pero eso es una trampa. Sobre un fondo de color o con patrón, el relleno blanco de la forma abierta sería visible. Usar fill:none es la opción más robusta.
Ejemplo con stroke-linecap y stroke-linejoin:
Dos propiedades de presentación controlan el aspecto de un polyline con trazo: stroke-linecap da forma a los dos extremos abiertos de la línea (butt, round o square), y stroke-linejoin da forma a las esquinas donde se unen los segmentos (miter, round o bevel). Son más visibles con trazos gruesos:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<!-- Sharp default: square ends, mitered corners -->
<polyline points="20,40 80,140 140,40"
style="fill:none;stroke:teal;stroke-width:16;
stroke-linecap:butt;stroke-linejoin:miter" />
<!-- Soft: rounded ends and rounded corners -->
<polyline points="200,40 260,140 320,40"
style="fill:none;stroke:tomato;stroke-width:16;
stroke-linecap:round;stroke-linejoin:round" />
</svg>
</body>
</html>Compara la esquina en punta de la línea izquierda (teal) con la esquina suave de la derecha (tomato). Para explorar estas y otras opciones de trazo en profundidad, consulta SVG Stroking.
Atributos específicos de <polyline>
Solo dos atributos pertenecen genuinamente al propio elemento <polyline> — el resto de lo que se establece en él (fill, stroke, stroke-width, etc.) son propiedades de presentación heredadas del modelo de presentación general de SVG, que se tratan por separado a continuación.
| Atributo | Descripción |
|---|---|
| points | La lista de puntos (pares de coordenadas absolutas x,y) que definen la polilínea. Es el único atributo obligatorio. |
| pathLength | La longitud total de la línea en unidades de usuario, utilizada para calibrar efectos de trazo (como guiones). |
Propiedades de presentación (heredadas, no específicas de polyline)
fill, stroke, stroke-linecap y stroke-linejoin no son exclusivos de <polyline> — son propiedades de presentación CSS que se aplican a la mayoría de los elementos gráficos SVG y pueden establecerse como atributos XML (stroke="purple") o mediante CSS (style="stroke:purple"). Son heredables y sobreescribibles como cualquier otro CSS, por lo que se listan aquí en lugar de como atributos de elemento.
| Propiedad | Descripción |
|---|---|
| fill | El color utilizado para inundar el interior (cerrado automáticamente). Establece fill:none para una línea abierta. |
| stroke | El color de la línea en sí. |
| stroke-width | El grosor de la línea. |
| stroke-linejoin | El tipo de esquina creada donde se unen dos segmentos: miter, round o bevel. |
| stroke-linecap | La forma de los extremos abiertos de la línea: butt, round o square. |
El elemento SVG <polyline> también admite los Atributos Globales y los Atributos de Evento.