SVG  Comment dessiner des polygones <polygon>

Les polygones sont des formes tracés avec des lignes droites, et la forme est "fermée".

Somaire

Dessiner des polygones


HTML5 cours tutorial SVG

SVG permet de Dessiner les polygone avec <polygon>

L'élément <polygon> est utilisé pour créer un graphique qui contient au moins trois côtés.

Remarque Astuce : Le mot polygone vient du grec. « Poly » qui signifie « beaucoup » et « gon » qui signifie «angle ».

Voici le code SVG :

Sélectionner le code


  <!DOCTYPE html>
 <html>
 <head>
 <title> SVG tracer des polygone</title>
 <style>
 polygon{
      stroke:blue;
      stroke-width:2;
      fill:pink;
      }
 </style>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <polygon points="200,10 250,190 160,210"/>
 </svg>
  </div>
 </body>
 </html>

 


 Explication du code :

L'attribut points définit les coordonnées x et y pour chaque angle du polygone.


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

Voici le code SVG :

Sélectionner le code


  <!DOCTYPE html>
 <html>
 <head>
 <title> SVG tracer des polygone</title>
 <style>
 polygon{
      stroke:blue;
      stroke-width:2;
      fill:pink;
      }
 </style>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <polygon points="220,10 300,210 170,250 123,234"/>
 </svg>
  </div>
 </body>
 </html>

 

Exemple 3 L'élément <polygon> permet de créer une étoile :

Voici le code SVG :

Sélectionner le code


  <!DOCTYPE html>
 <html>
 <head>
 <title> SVG tracer des polygone</title>
 <style>
 polygon{
      stroke:blue;
      stroke-width:2;
      fill:pink;
      }
 </style>
 </head>
 <body>
 <div>
 <svg viewBox="0 0 1200 600" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <polygon points="100,10 40,180 190,60 10,60 160,180"/>
 </svg>
  </div>
 </body>
 </html>

 
Par carabde 20 Avril 2014