El elemento <polyline> de SVG en HTML se usa para crear una forma conectando líneas a través de diferentes puntos. Es diferente de <polygon> ya que se puede usar para crear formas abiertas.
Sintaxis:
<polyline points="Pair of points required to draw the shape"
stroke="stroke color"
fill="fill color for colored closed shapes">
Atributos:
- puntos: par de puntos necesarios para dibujar la forma
- pathLength: Indica la longitud total del camino.
A continuación se dan algunos ejemplos para una mejor comprensión del elemento SVG <polyline>.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
svg{
background-color: black;
}
</style>
<body>
polyline <br>
<svg width="200px" height="200px">
<polyline points="100,150 10,250 180,17 50,100"
fill="green" stroke="yellow"
stroke-width="5">
</svg><br>
polygon <br>
<svg width="200px" height="200px">
<polygon points="100,150 10,250 180,17 50,100"
fill="green" stroke="yellow"
stroke-width="5">
</svg>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
svg{
background-color: black;
}
</style>
<body>
polyline <br>
<svg width="200px" height="200px">
<polyline points="100,105 180,20 100,17 50,100"
stroke="yellow" stroke-width="5">
</svg><br>
polygon <br>
<svg width="200px" height="200px">
<polygon points="100,105 180,20 100,17 50,100"
stroke="yellow" stroke-width="5">
</svg>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Borde
- Ópera
- explorador de Internet
- Safari
- Firefox