Dibujar un polígono con SVG <polygon>

El elemento <polygon> define una forma de polígono cerrado compuesta por una serie de segmentos de línea conectados en secuencia, donde el último punto se conecta al primer punto. El elemento <polygon> se utiliza generalmente para dibujar poligonos con varios (3caras (o más)/la forma del borde.

Ejemplo de polígono SVG Polygon

Este es un ejemplo simple de polígono SVG:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon puestos="10,0　　60,0　　35,50"
　　　　　　　　　estilo="trazo:#660000; relleno:#cc3333;"/>
</svg>

El efecto después de ejecutar se muestra a continuación:

Es posible que ya hayas notado, incluso si solo se enumeran3puntos, también se dibujan todos3caras. Esto se debe a que el elemento <polygon> dibuja una línea entre todos los puntos, incluyendo una línea desde el último punto al primer punto. El <polyline> no dibuja una línea desde el último punto al primer punto. Esta parece ser la única diferencia entre los elementos <polygon> y <polyline>.

Dibujar un hexágono

Código de ejemplo:

<svg width="120" altura="120" viewPort="0 0　120　120" versión="1.1"　　　　
xmlns="http://www.w3.org/2000/svg">　　　　
<polygon puestos="60,20　100,40　100,80　60,100　20,80　20,40"/>　　　　
</svg>

El efecto de ejecución es el siguiente

Dibujar un octágono

Este es un ejemplo más grande-8un polígono de lados (octágono):

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<polygon puestos="50,5　　　100,5　　125,30　　125,80　100,105
　　　　　　　　　　　　　　　　　　　50,105　　25,80　　25,　30"
　　　　　　　　　　estilo="trazo:#660000; relleno:#cc3333; trazo-ancho:　3;"/>
</svg>

Dibujar una estrella de cinco lados con SVG

Código de ejemplo:

<svg xmlns="http://www.w3.org/2000/svg" versión="1.1">
　　<polygon puestos="100,10　40,180　190,60　10,60　160,180" estilo="relleno:lime;trazo:purple;trazo-ancho:5;relleno-rule:nonzero;"/>
</svg>

El efecto después de ejecutar se muestra a continuación: