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 :

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

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
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web