Latest web development tutorials

polígono SVG

SVG polígono - <polígono>

Ejemplo 1

<Polygon> etiqueta se utiliza para crear gráficos que contienen al menos tres de sus lados.

Los polígonos son líneas rectas, la forma es "cerrada" (todas las líneas conectadas).

observación polígono de Grecia. "Poli" a "gon" "ángulo" "muchos" medios.

Aquí está el código SVG:

Ejemplos

<Xmlns = Svg "http://www.w3.org/2000/svg" version = "1.1">
<Polígono apunta = "200.10 250 190 160 210"
style = "llenar: cal; accidente cerebrovascular: púrpura, accidente cerebrovascular-width: 1" />
</ Svg>

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).

análisis de código:

  • x e y las coordenadas de los puntos de definiciones de atributos de cada esquina del polígono

Ejemplo 2

El siguiente ejemplo crea un polígono de cuatro lados:

Aquí está el código SVG:

Ejemplos

<Xmlns = Svg "http://www.w3.org/2000/svg" version = "1.1">
<Polígono apunta = "220,10 300.210 170.250 123.234"
style = "llenar: cal; accidente cerebrovascular: púrpura, accidente cerebrovascular-width: 1" />
</ Svg>

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).


Ejemplo 3

Utilice <polígono> elemento para crear una estrella:

Aquí está el código SVG:

Ejemplos

<Xmlns = Svg "http://www.w3.org/2000/svg" version = "1.1">
<Polígono apunta = "100,10 40.180 190,60 10,60 160.180"
style = "llenar: cal; accidente cerebrovascular: púrpura, accidente cerebrovascular-width: 5; rellenar regla: no nulo;" />
</ Svg>

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).


Ejemplo 4

Cambiar el relleno en reglas atributo "EVENODD":

Aquí está el código SVG:

Ejemplos

<Xmlns = Svg "http://www.w3.org/2000/svg" version = "1.1">
<Polígono apunta = "100,10 40.180 190,60 10,60 160.180"
style = "llenar: cal; accidente cerebrovascular: púrpura, accidente cerebrovascular-width: 5; rellenar regla: EVENODD;" />
</ Svg>

Trate »

Para los usuarios de Opera: vista de archivos SVG (haz clic derecho en los gráficos SVG fuente de vista previa).