Cercle SVG
Sur cette page, découvrez l'élément SVG <circle>, apprenez à créer un cercle et explorez des exemples avec différents attributs.
Description de l'élément <circle>
L'élément SVG <circle> trace un cercle à partir d'un point central et d'un rayon. Les coordonnées du centre du cercle sont définies avec les attributs cx et cy, et le rayon est défini avec l'attribut r.
C'est l'une des formes de base de SVG, aux côtés des éléments <ellipse>, <rect> et <line>. Utilisez <circle> chaque fois que vous avez besoin d'une forme parfaitement ronde qui s'adapte sans perte de qualité, car SVG est basé sur des vecteurs.
Exemple de l'élément SVG <circle> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="300" width="300">
<circle cx="150" cy="150" r="100" stroke="grey" stroke-width="5" fill="purple" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Expliquons le code ci-dessus :
- Les attributs
cxetcyspécifient les coordonnées x et y du centre du cercle. - L'attribut
rspécifie le rayon du cercle. - Les attributs
strokeetstroke-widthtracent un contour gris de 5 px, etfillpeint l'intérieur en violet.
Le piège des valeurs par défaut de cx/cy : si vous omettez cx et cy, ils prennent tous les deux la valeur par défaut 0, ce qui place le centre dans le coin supérieur gauche du canevas SVG. Seul le quart inférieur droit du cercle reste alors visible — le reste est rogné en dehors du viewport. Définissez toujours cx et cy à au moins r pour que le cercle entier tienne dans le SVG.
Techniques avancées pour les cercles SVG
Les cercles SVG de base sont très utiles, mais il existe de nombreuses techniques avancées pour les faire ressortir. Voici quelques exemples :
Dégradés
Les cercles SVG peuvent utiliser des dégradés pour créer une transition douce entre les couleurs. Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#grad1)" />
</svg>
</body>
</html>Dans cet exemple, nous avons créé un dégradé qui va du jaune au rouge. Nous utilisons ensuite l'attribut fill pour appliquer le dégradé à notre cercle.
Ombres
Les cercles SVG peuvent également avoir des ombres pour créer de la profondeur et du volume. Le filtre doit être défini dans un bloc <defs> (ou du moins avant l'élément qui y fait référence) pour que le navigateur puisse résoudre la référence url(#shadow). Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="120" height="120">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black" />
</filter>
</defs>
<circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
</svg>
</body>
</html>Ici, nous définissons le filtre d'ombre dans <defs> puis nous l'appliquons au cercle avec filter="url(#shadow)". La primitive feDropShadow effectue le travail : dx et dy décalent l'ombre, stdDeviation contrôle le niveau de flou et flood-color définit la couleur de l'ombre. Les attributs x, y, width et height du filtre agrandissent la région du filtre à 140% pour que l'ombre décalée et floue ne soit pas rognée aux bords de la zone de filtre par défaut.
Animations
Enfin, les cercles SVG peuvent également être animés pour créer des expériences interactives pour vos utilisateurs. Voici un exemple :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<circle id="myCircle" cx="50" cy="50" r="40" fill="green">
<animate attributeName="cx" from="50" to="200" dur="1s" begin="click" />
</circle>
</svg>
</body>
</html>Dans cet exemple, nous avons créé un cercle vert qui se déplace lorsqu'on clique dessus. Nous utilisons l'élément <animate> pour définir l'animation et cibler la propriété à modifier avec l'attribut attributeName.
Remarque :
<animate>fait partie de SMIL, dont la prise en charge par les navigateurs est inégale et qui a été déprécié par le passé dans certains moteurs. Pour une utilisation en production, les animations CSS ou JavaScript (par exemple l'API Web Animations) sont généralement un choix plus fiable.
Attributs
L'élément SVG <circle> supporte également les attributs globaux et les attributs d'événements.
| Attribut | Description |
|---|---|
| cx | La coordonnée sur l'axe x du centre du cercle. Par défaut 0. |
| cy | La coordonnée sur l'axe y du centre du cercle. Par défaut 0. |
| r | Le rayon du cercle. Une valeur inférieure ou égale à zéro désactive le rendu du cercle. |
| stroke | La couleur du contour du cercle. |
| stroke-width | L'épaisseur du contour du cercle, en unités utilisateur. |
| fill | La couleur utilisée pour peindre l'intérieur du cercle. |
| pathLength | Spécifie la longueur totale du chemin, en unités utilisateur (les noms d'attributs SVG sont sensibles à la casse). |
Les cercles acceptent également les attributs de présentation SVG courants : fill-opacity et stroke-opacity contrôlent la transparence du remplissage et du contour, et stroke-dasharray transforme un contour plein en contour en pointillés (par exemple stroke-dasharray="10 5").
L'élément <circle> est étroitement lié aux autres formes de base SVG. Consultez SVG <ellipse> pour les ovales avec deux rayons indépendants, et SVG <rect> pour les rectangles et les rectangles à coins arrondis.