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.
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.
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>
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'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. MerciHébergeur Discount - Hébergement web