Polígonos en SVG

A parte de las figuras básica: círculos, líneas, elipses,… otra figura, también llamada básica, es el polígono. Mediante esta figura podremos crear polígonos con las formas que queramos. Para crear polígonos en SVG utilizamos el elemento polygon.

Para poder crear un polígono en SVG simplemente tendremos que ir identificando la secuencia de puntos que forman sus vértices. Los puntos son identificados mediante el atributo points el cual recibirá como valores una lista de puntos separados por comas.

Así, el elemento polygon nos quedaría de la siguiente forma:

<polygon points="lista de puntos"/>

Las técnicas de coloreado, bordes, opacidad,… son genéricas para todas las formas básicas (Shapes).

Lista Puntos Polígono

Definir la lista de puntos tiene su intríngulis ya que tenemos una gramática a aplicar. En este caso la gramática es Backus-Naur Form (BNF). También aplicable a los puntos de polyline.

Dentro de la notación nos encontramos los siguientes elementos

• • cero o más.
• • uno o más
• ? cero o uno.
• () agrupaciones.

• alternativas de separación.

• Dobles comillas separadas por literales.

Ahora, que lo más normal es que nos encontremos coordenadas numéricas separadas por comas. Por ejemplo, veamos el caso que nos ofrece la especificación SVG para una estrella:

<polygon fill="red" stroke="blue" stroke-width="10"    
   points="350,75 379,161 469,161 397,215
   423,301 350,250 277,301 303,215
   231,161 321,161" />

O un triángulo, algo más sencillo que el anterior. Este de nuestra cosecha…

<polygon points="100,100 100,200 200,200"/>

• ← Anterior
• Siguiente →