Quel est l'usage de l'élément en SVG ?

L'élément en SVG est utilisé pour créer des graphiques qui contiennent au moins trois côtés, permettant de dessiner diverses formes, comme des polygones et des étoiles.

Comment personnaliser les polygones en SVG ?

Vous pouvez personnaliser les polygones en SVG en modifiant les attributs CSS comme le trait (stroke), l'épaisseur du trait (stroke-width) et la couleur de remplissage (fill).

Quel est un exemple simple de polygone en SVG ?

Un exemple simple de polygone en SVG utilise un code avec pour définir les sommets du polygone, et des styles pour le trait et le remplissage.

Comment créer une étoile avec SVG ?

Pour créer une étoile avec SVG, utilisez l'élément et définissez les points de l'étoile dans l'attribut 'points' pour tracer les branches.

SVG Polygon : Comment Dessiner des Polygones avec l'Élément <polygon>

OUJOOD.COM

chapitre suivant

Comprendre et Dessiner des Polygones en SVG

HTML5 cours tutorial SVG - Élément Polygon

L'Élément <polygon> : Créer des Formes Géométriques Fermées

L'élément <polygon> est un composant fondamental de SVG permettant de créer des graphiques vectoriels composés de lignes droites connectées formant une forme fermée automatiquement. Un polygone doit contenir au moins trois côtés pour constituer une forme géométrique valide. Contrairement à l'élément <polyline>, le polygone ferme automatiquement le chemin en reliant le dernier point au premier point défini.

Remarque Astuce étymologique : Le mot polygone provient du grec ancien. « Poly » signifie « plusieurs » ou « beaucoup » et « gon » (ou gonia) signifie « angle ». Un polygone est donc littéralement une figure à plusieurs angles.

Introduction au Triangle : Le Polygone le Plus Simple

Le triangle représente le polygone minimal avec ses trois sommets. Dans cet exemple pratique, nous allons créer un triangle en définissant trois paires de coordonnées x,y dans l'attribut points. Chaque paire représente un sommet du triangle dans le système de coordonnées SVG.

Exemple 1 : Triangle Simple 📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<title>SVG Tracer un Triangle avec Polygon</title>
<style>
polygon{
      stroke:blue; <!-- Couleur de la bordure du polygone -->
      stroke-width:2; <!-- Épaisseur du contour en pixels -->
      fill:pink; <!-- Couleur de remplissage intérieur -->
      }
</style>
</head>
<body>
<div>
<svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- Définition des trois sommets du triangle : (200,10), (250,190), (160,210) -->
  <polygon points="200,10 250,190 160,210"/>
</svg>
</div>
</body>
</html>

Explication détaillée du code :
L'attribut points constitue le cœur de l'élément <polygon>. Il définit une séquence de coordonnées x et y pour chaque sommet du polygone. Les coordonnées sont listées dans l'ordre de connexion : x1,y1 x2,y2 x3,y3, etc. Dans notre exemple, le point (200,10) représente le sommet supérieur, (250,190) le sommet inférieur droit, et (160,210) le sommet inférieur gauche. SVG trace automatiquement les lignes entre ces points et ferme la forme en reliant le dernier point au premier.

Exemple 2 : Créer un Quadrilatère (Polygone à Quatre Côtés)

Les quadrilatères constituent la catégorie de polygones à quatre sommets. En augmentant le nombre de points dans l'attribut points, nous pouvons créer des formes plus complexes. Cet exemple démontre comment définir un polygone irrégulier à quatre côtés en spécifiant quatre paires de coordonnées.

Exemple 2 : Quadrilatère Irrégulier 📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<title>SVG Tracer un Quadrilatère avec Polygon</title>
<style>
polygon{
      stroke:blue; <!-- Contour bleu pour meilleure visibilité -->
      stroke-width:2; <!-- Épaisseur de trait de 2 pixels -->
      fill:pink; <!-- Remplissage rose pour distinction -->
      }
</style>
</head>
<body>
<div>
<svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- Quadrilatère avec 4 sommets : (220,10), (300,210), (170,250), (123,234) -->
  <!-- Les lignes se tracent dans l'ordre : sommet 1→2, 2→3, 3→4, puis 4→1 automatiquement -->
  <polygon points="220,10 300,210 170,250 123,234"/>
</svg>
</div>
</body>
</html>

Analyse technique :
Ce quadrilatère démontre la flexibilité de l'élément <polygon>. Les quatre sommets créent une forme irrégulière fermée où chaque segment est tracé automatiquement. L'ordre des points dans l'attribut points détermine l'ordre de connexion des sommets, ce qui influence directement la forme finale du polygone.

Exemple 3 : Dessiner une Étoile à Cinq Branches

L'élément <polygon> excelle dans la création de formes complexes comme les étoiles. Pour tracer une étoile à cinq branches, nous alternons entre des points extérieurs (branches) et des points intérieurs (creux). Cette technique de coordonnées alternées crée l'effet visuel caractéristique d'une étoile en reliant les sommets dans un ordre spécifique.

Exemple 3 : Étoile à Cinq Branches 📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<title>SVG Créer une Étoile avec Polygon</title>
<style>
polygon{
      stroke:blue; <!-- Bordure bleue pour définir le contour -->
      stroke-width:2; <!-- Épaisseur visible du trait -->
      fill:pink; <!-- Couleur de remplissage de l'étoile -->
      }
</style>
</head>
<body>
<div>
<svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- Étoile avec 5 points définissant les branches -->
  <!-- Ordre des sommets : haut, bas-gauche, droite, gauche, bas-droite -->
  <!-- Cette séquence crée les branches entrecroisées caractéristiques -->
  <polygon points="100,10 40,180 190,60 10,60 160,180"/>
</svg>
</div>
</body>
</html>

Explication de la construction de l'étoile :
La création d'une étoile nécessite une compréhension précise de l'ordre des coordonnées. Au lieu de placer les points de manière séquentielle autour d'un cercle, nous les connectons en sautant des positions, créant ainsi les branches entrecroisées. Les cinq points (100,10), (40,180), (190,60), (10,60), et (160,180) sont positionnés de manière à ce que leur connexion dans cet ordre forme les cinq branches distinctes de l'étoile.

Exemple 4 : Pentagone Régulier

Un pentagone régulier est un polygone à cinq côtés où tous les côtés et tous les angles sont égaux. Pour créer un pentagone régulier, nous devons calculer les coordonnées équidistantes autour d'un point central en utilisant des calculs trigonométriques basés sur des angles de 72 degrés (360°/5).

Exemple 4 : Pentagone Régulier 📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<title>SVG Pentagone Régulier avec Polygon</title>
<style>
polygon{
      stroke:darkgreen; <!-- Bordure vert foncé -->
      stroke-width:3; <!-- Trait plus épais pour mieux visualiser -->
      fill:lightgreen; <!-- Remplissage vert clair -->
      }
</style>
</head>
<body>
<div>
<svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <!-- Pentagone régulier centré avec 5 sommets équidistants -->
  <!-- Points calculés à 72° d'intervalle autour d'un cercle -->
  <polygon points="200,50 275,150 237,250 163,250 125,150"/>
</svg>
</div>
</body>
</html>

Points techniques sur le pentagone :
Dans cet exemple, les cinq sommets sont disposés de manière équidistante autour d'un point central, créant une forme parfaitement symétrique. Chaque angle intérieur d'un pentagone régulier mesure 108 degrés, et cette symétrie est reflétée dans le positionnement précis des coordonnées.

Propriétés Avancées de Stylisation des Polygones

Les polygones SVG peuvent être personnalisés avec diverses propriétés CSS pour créer des effets visuels sophistiqués :

• fill-opacity : Contrôle la transparence du remplissage (valeur de 0 à 1)
• stroke-opacity : Définit la transparence du contour
• stroke-linejoin : Détermine l'apparence des angles (miter, round, bevel)
• stroke-linecap : Contrôle l'apparence des extrémités de ligne
• fill-rule : Définit comment remplir les formes complexes (nonzero, evenodd)

chapitre précédent

sommaire