Polygone SVG
Description de l'élément <polygon>
L'élément SVG <polygon> crée un graphique contenant au moins trois côtés.
Les polygones sont constitués de lignes droites qui se rejoignent, et leur forme est "fermée".
Exemple de l'élément SVG <polygon> avec trois côtés :
Exemple de l'élément SVG <polygon> avec trois côtés
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="250" >
<polygon points="220,30 270,210 180,230" style="fill:yellow;stroke:green;stroke-width:3" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Dans cet exemple, l'attribut points spécifie les coordonnées x et y pour chaque coin de notre polygone.
Exemple de l'élément SVG <polygon> avec quatre côtés :
Exemple de l'élément SVG <polygon> avec quatre côtés :
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="300">
<polygon points="230,20 310,220 180,260 133,244" style="fill:yellow;stroke:pink;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Exemple de l'élément SVG <polygon> pour créer une étoile :
Exemple de l'élément SVG <polygon> pour créer une étoile :
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="230" >
<polygon points="110,20 50,208 200,88 20,88 170,208" style="fill:pink;stroke:coral;stroke-width:3;fill-rule:nonzero;"/>
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Attributs
| Attribut | Description |
|---|---|
| points | Cet attribut spécifie la liste des points (paires de coordonnées absolues x,y) nécessaires au tracé du polygone. |
| pathLength | Cet attribut spécifie la longueur totale du tracé, en unités utilisateur. |
L'élément SVG <polygon> prend également en charge les Attributs globaux et les Attributs d'événement.
Pratique
Qu'est-ce qui est vrai concernant le polygone SVG selon le contenu de l'URL fournie ?