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
L'élément <polygon> est utilisé pour créer un graphique qui
contient au moins trois côtés.
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.
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>
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
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENT