Polilínea SVG
Descripción del elemento <polyline>
El elemento SVG <polyline> crea cualquier forma compuesta únicamente por líneas rectas que conectan varios puntos. A diferencia del elemento <polygon>, <polyline> crea formas abiertas.
Ejemplo del elemento SVG <polyline>:
Ejemplo del elemento SVG <polyline>
html
<!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>Para definir la forma, enumere los pares de coordenadas en el atributo points. Separe los valores x e y de cada par con una coma y separe cada par con un espacio. Por ejemplo: points="30,30 50,35 70,50".
Ejemplo del elemento SVG <polyline> con líneas rectas:
Ejemplo del elemento SVG <polyline> con líneas rectas
html
<!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>Atributos
| Atributo | Descripción |
|---|---|
| points | Este atributo especifica la lista de puntos (pares de coordenadas absolutas x,y) necesarios para dibujar la polilínea. |
| pathLength | Este atributo especifica la longitud total de la ruta, en unidades de usuario. |
| stroke-linejoin | Especifica el tipo de esquina creada cuando dos líneas se encuentran. |
| stroke-linecap | Especifica la forma de los extremos de la línea. |
El elemento SVG <polyline> también admite los Atributos globales y los Atributos de eventos.
Práctica
¿Qué atributos se pueden usar con el elemento SVG <polyline> en HTML?