Polígono SVG
Descripción del elemento <polygon>
El elemento SVG <polygon> crea un gráfico que contiene al menos tres lados.
Los polígonos están formados por líneas rectas que se conectan entre sí, y su forma es "cerrada".
Ejemplo del elemento SVG <polygon> con tres lados:
Ejemplo del elemento SVG <polygon> con tres lados
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="250" >
<polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>En este ejemplo, el atributo points especifica las coordenadas x e y para cada esquina de nuestro polígono.
Ejemplo del elemento SVG <polygon> con cuatro lados:
Ejemplo del elemento SVG <polygon> con cuatro lados:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="300">
<polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Ejemplo del elemento SVG <polygon> para crear una estrella:
Ejemplo del elemento SVG <polygon> para crear una estrella:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="230" >
<polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
Sorry, inline SVG isn't 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 el polígono. |
| pathLength | Este atributo especifica la longitud total de la ruta, en unidades de usuario. |
El elemento SVG <polygon> también admite los Atributos globales y los Atributos de eventos.
Práctica
¿Qué es cierto sobre el polígono SVG según el contenido de la URL proporcionada?