Latest web development tutorials

SVG polygone

SVG polygone - <polygon>

exemple 1

<Polygon> est utilisée pour créer des graphiques contenant au moins trois côtés.

Polygones sont des lignes droites, la forme est "fermée" (toutes les lignes connectées).

remarque polygone de la Grèce. "Poly" a "beaucoup", "gon" signifie "angle".

Voici le code SVG:

Exemples

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<Polygon pointe = "200,10 250190 160210"
style = "remplir: chaux, accident vasculaire cérébral: pourpre; stroke-width: 1" />
</ Svg>

Essayez »

Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).

Analyse de code:

  • coordonnées x et y des points d'attribut définitions pour chaque coin du polygone

exemple 2

L'exemple suivant crée un polygone à quatre côtés:

Voici le code SVG:

Exemples

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<Polygon pointe = "220,10 300.210 170.250 123.234"
style = "remplir: chaux, accident vasculaire cérébral: pourpre; stroke-width: 1" />
</ Svg>

Essayez »

Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).


exemple 3

Utilisez <polygon> pour créer une étoile:

Voici le code SVG:

Exemples

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<Polygon pointe = "100,10 40.180 190,60 10,60 160.180"
style = "remplir: chaux, accident vasculaire cérébral: pourpre; stroke-width: 5; fill-rule: non nulle;" />
</ Svg>

Essayez »

Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).


exemple 4

Changez le remplissage règle attribut "evenodd":

Voici le code SVG:

Exemples

<Xmlns Svg = "http://www.w3.org/2000/svg" version = "1.1">
<Polygon pointe = "100,10 40.180 190,60 10,60 160.180"
style = "remplir: chaux, accident vasculaire cérébral: pourpre; stroke-width: 5; fill-rule: evenodd;" />
</ Svg>

Essayez »

Pour les utilisateurs d' Opera: vue fichier SVG (clic droit sur le graphique aperçu la source SVG).