SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML. El elemento <polygon> de SVG se usa para hacer cualquier tipo de polígono en el SVG y define una forma cerrada que consta de un conjunto de segmentos de línea recta conectados.
Sintaxis:
<polygon 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 <polygon>.
Ejemplo 1:
<!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> <body> <svg width="400px" height="400px"> <!-- try different pairs and make different shapes--> <polygon points="0, 100 100, 100 100, 100 100, -20000" fill="green"> </svg> </body> </html>
Producción:
Ejemplo 2:
<!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>
<svg width="200px" height="200px">
<!-- try different pairs and make different shapes-->
<polygon points="100, 100 15, 205 150, 7 20, 0"
fill="green" stroke="yellow">
</svg>
</body>
</html>
Producción:
Navegadores compatibles: a continuación se indican los navegadores compatibles con este elemento svg.
- Cromo
- Borde
- Ópera
- Explorador de Internet
- Safari
- Firefox