W3docs
es
Iniciar sesión

Polígono SVG

On this page, you can find useful information about the SVG <polygon> shape element, see its usage with our examples and try to create one for yourself.

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

<!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>
Pruébalo tú mismo »

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:

<!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>
Pruébalo tú mismo »

Ejemplo del elemento SVG <polygon> para crear una estrella:

Ejemplo del elemento SVG <polygon> para crear una estrella:

<!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>
Pruébalo tú mismo »

Atributos

AtributoDescripción
pointsEste atributo especifica la lista de puntos (pares de coordenadas absolutas x,y) necesarios para dibujar el polígono.
pathLengthEste 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

Práctica

¿Qué es cierto sobre el polígono SVG según el contenido de la URL proporcionada?