La balise <circle> est utilisée pour dessiner des cercles dans un graphique SVG.
Elle permet de définir facilement un cercle en utilisant trois attributs essentiels :
cx: la coordonnée x du centre ;cy: la coordonnée y du centre ;r: le rayon du cercle.
Le cercle est stylisable avec des attributs comme fill (pour son remplissage) ou stroke (pour les bordures). 😉
Structure et syntaxe de la balise <circle>
Structure
Voici un exemple simple de syntaxe :
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="blue" />
</svg>Dans cet exemple :
cx="100"positionne le centre du cercle à 100 pixels sur l'axe x ;cy="100"positionne le centre du cercle à 100 pixels sur l'axe y ;r="50"fixe le rayon du cercle à 50 pixels ;fill="blue"donne une couleur de remplissage bleue au cercle.
Voici le résultat de cet exemple :
Comme nous pouvons le constater, cette balise s'utilise toujours avec la balise <svg>.
Exemple avancé
Voici un exemple de plusieurs cercles avec des styles différents pour mieux comprendre leur fonctionnement :
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="30" fill="red" />
<circle cx="150" cy="50" r="30" fill="green" stroke="black" stroke-width="2" />
<circle cx="250" cy="50" r="30" fill="none" stroke="blue" stroke-width="4" />
</svg>Dans cet exemple :
- Le premier cercle est rouge et plein ;
- Le deuxième cercle est vert avec une bordure noire de 2 pixels ;
- Le troisième cercle est vide (sans remplissage) avec une bordure bleue de 4 pixels.
Voici le rendu :
Attributs
Voici les attributs principaux pour la balise <circle> :
cx: position x du centre du cercle (par défaut 0).cy: position y du centre du cercle (par défaut 0).r: rayon du cercle (valeur négative interdite).fill: couleur de remplissage (par défaut noir).stroke: couleur de la bordure.stroke-width: largeur de la bordure.
Bonnes pratiques
Pour bien utiliser cette balise, assurez-vous toujours que les valeurs de cx, cy et r ne dépassent pas les dimensions de la zone SVG.
Utilisez également les attributs fill et stroke de manière contrasté pour une meilleure lisibilité, sans quoi vous serez pénalisé pour les moteurs de recherche (tout en ayant une page assez mauvaise pour l'expérience votre utilisateur !).
Vous pouvez regrouper plusieurs cercles et autres éléments dans un <g> pour une manipulation simplifiée.
Compatibilité des navigateurs
La balise <circle> est compatible avec tous les navigateurs modernes :
| Navigateur | Compatibilité |
|---|---|
| Chrome | Oui |
| Firefox | Oui |
| Safari | Oui |
| Edge | Oui |
| Internet Explorer | Partielle (IE 9+) |