W3docs
es
Iniciar sesión

SVG Polygon

En esta página encontrarás información útil sobre el elemento de forma SVG <polygon>, ejemplos de uso y podrás crear uno tú mismo.

Descripción del elemento <polygon>

El elemento SVG <polygon> crea una figura cerrada formada por segmentos de línea recta. Un polígono se define mediante una lista de puntos esquina (al menos tres), y la figura se cierra automáticamente: el navegador traza una línea final desde el último punto hasta el primero, por lo que no es necesario repetir la coordenada inicial.

Este comportamiento de cierre automático es la diferencia clave entre <polygon> y <polyline>: una polilínea dibuja los mismos segmentos de línea conectados, pero deja el trazado abierto (sin segmento de vuelta al inicio). Usa <polygon> para figuras rellenas y cerradas como triángulos, estrellas o flechas, y <polyline> para trazados abiertos como líneas en zigzag o gráficas.

El atributo points

La figura se describe completamente mediante el atributo points. Contiene una lista de pares de coordenadas x,y escritos en unidades del espacio de usuario:

points="x1,y1 x2,y2 x3,y3 ..."
  • Cada par representa un vértice del polígono.
  • Los pares se separan por espacios en blanco; dentro de un par, los valores x e y se separan por una coma (o un espacio — 220 30 270 210 también es válido, pero la forma con coma es más fácil de leer).
  • Las coordenadas son absolutas, medidas desde la esquina superior izquierda del lienzo SVG, donde y aumenta hacia abajo.

Por lo tanto, points="220,30 270,210 180,230" define tres vértices y, dado que la figura se cierra automáticamente, produce un triángulo.

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 »

Aquí el atributo points lista tres vértices — 220,30, 270,210 y 180,230 — y el navegador los conecta y cierra la figura formando un triángulo.

Estilo: fill, stroke y stroke-width

El aspecto visual se controla mediante atributos de presentación. Estos no son específicos de <polygon> — se aplican a todas las figuras SVG, y cada uno tiene una propiedad CSS equivalente, por lo que puedes definirlos de forma inline (como en style="..." arriba), como atributos simples (fill="yellow"), o desde una hoja de estilos CSS:

  • fill — el color utilizado para pintar el interior de la figura.
  • stroke — el color del contorno.
  • stroke-width — el grosor del contorno, en unidades de usuario.

Como son propiedades CSS reales, una regla de hoja de estilos como polygon { fill: yellow; stroke: green; } reemplaza los atributos simples fill/stroke, pero a su vez es reemplazada por un style inline.

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 »

Agregar más pares de coordenadas simplemente añade más vértices. Los cuatro puntos anteriores producen un cuadrilátero; puedes listar tantos puntos como necesite la figura.

Construcción de un polígono regular

Un polígono regular (triángulo equilátero, cuadrado, pentágono, hexágono, etc.) tiene todos los lados y ángulos iguales. No existe un atributo específico para esto — debes colocar los vértices sobre un círculo tú mismo. Para n lados en un círculo de radio r centrado en (cx, cy), cada vértice i se encuentra en:

x = cx + r * cos(2π * i / n)
y = cy + r * sin(2π * i / n)

En la práctica, los puntos suelen calcularse previamente (a mano o con un pequeño script) y escribirse en el atributo points. Los ejemplos de triángulo y cuadrilátero anteriores utilizan coordenadas elegidas a mano, por lo que sus lados no son exactamente iguales.

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 »

Entendiendo fill-rule (por qué el centro de la estrella está vacío)

Cuando el contorno de una figura se cruza sobre sí mismo — como ocurre con una estrella de cinco puntas — el navegador debe decidir qué regiones cerradas cuentan como "interior" y deben rellenarse. El atributo de presentación fill-rule controla esa decisión. Acepta uno de dos valores:

  • nonzero (el valor predeterminado) — utilizado en el ejemplo de la estrella anterior. Para cualquier región, el navegador traza un rayo imaginario hacia afuera y cuenta cómo el trazado lo cruza: +1 por cada cruce en una dirección, -1 por la otra. Si el total es distinto de cero, la región se rellena. Para una estrella dibujada en un único trazo continuo, el pentágono interior resulta con un recuento distinto de cero, por lo que sí se rellena — la estrella aparece sólida.
  • evenodd — cuenta los cruces independientemente de la dirección. Si el recuento es impar, la región se rellena; si es par, permanece transparente. Con esta regla, el pentágono interior de la estrella obtiene un recuento par y permanece hueco.

Por tanto, cambiar únicamente fill-rule:nonzero por fill-rule:evenodd en el ejemplo de la estrella deja el centro transparente — una forma habitual de crear el contorno de una estrella.

Atributos

AtributoDescripción
pointsLa lista de puntos (pares de coordenadas absolutas x,y) que definen los vértices del polígono.
fill-ruleCómo se rellenan las regiones que se superponen: nonzero (predeterminado) o evenodd.
pathLengthLa longitud total que debe tratarse como longitud del trazado, en unidades de usuario. Establecerlo permite que atributos como stroke-dasharray usen valores relativos a esta longitud en lugar de la longitud geométrica real — útil cuando no deseas medir la figura con exactitud.

Como todas las figuras SVG, <polygon> también acepta los atributos de presentación fill, stroke y stroke-width, además de los Atributos Globales y los Atributos de Evento.

Páginas relacionadas

  • SVG Polyline — el equivalente de trazado abierto de <polygon>.
  • SVG Path — <path>, el elemento más flexible para dibujar curvas y formas complejas.
  • Referencia SVG — la lista completa de elementos y atributos SVG.

Práctica

Práctica
¿Cuáles de las siguientes afirmaciones sobre el elemento SVG <polygon> son verdaderas?
¿Cuáles de las siguientes afirmaciones sobre el elemento SVG <polygon> son verdaderas?
Was this page helpful?