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

  • Trafic Booster
    hebergement web


    HTML5, CSS3, JavaScript pour débutants Tome 1
    HTML5, CSS3, JavaScript
    pour débutants Tome 1

    Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    fonction date_sunrise

    Retourne l'heure de levé du soleil pour un jour et un endroit donnés

    liste des fonctions GD

    liste des fonctions GD

    Elément XSLT XSL value of

    Elément XSLT XSL value of



    Rentabilisez efficacement votre site