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 :
<!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 :
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>
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>
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENT