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