oujood.com

SVG  Comment dessiner des polygones <polygon>

Dans ce cours on va voir comment utiliser l'élément <polygon> de SVG pour dessiner les polygones
Les polygones sont des formes tracés avec des lignes droites, et la forme est fermée

chercher |

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 :

Exemple :       Copier 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 :

Exemple :       Copier 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 :

Exemple :       Copier 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

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe