Polígonos en SVG. El elemento Polygon.
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 poder crear un polígono. simplemente tendremos que ir identificando la secuencia de puntos que forman sus vértices. El elemento de SVG a utilizar es POLYGON. Los puntos son identificados mediante el atributo points de la siguiente forma:
- points = "lista puntos", lista de puntos que conforman el polígono.
La etiqueta 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).
Definiendo la lista de puntos
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"/>
