Cercle SVG
Description de l'élément <circle>
L'élément SVG <circle> crée des cercles à partir d'un point central et d'un rayon. Les coordonnées du centre du cercle sont spécifiées par les attributs cx et cy. Le rayon du cercle est spécifié par l'attribut r.
Exemple de l'élément SVG <circle> :
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 cx et cy spécifient les coordonnées x et y du centre du cercle. Si les attributs cx et cy sont omis, le centre du cercle est défini à (0,0).
- L'attribut r est utilisé pour spécifier le rayon du cercle.
Techniques avancées pour les cercles SVG
Bien que les cercles SVG de base soient excellents, de nombreuses techniques avancées permettent de les mettre en valeur. Voici quelques exemples :
Dégradés
Les cercles SVG peuvent utiliser des dégradés pour créer une transition fluide entre les couleurs. Voici un exemple :
Les cercles SVG peuvent utiliser des dégradés pour créer une transition fluide entre les couleurs
<!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é allant 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. Voici un exemple :
Les cercles SVG peuvent également avoir des ombres pour créer de la profondeur et du volume.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
<filter id="shadow">
<feDropShadow dx="2" dy="2" stdDeviation="2" />
</filter>
</svg>
</body>
</html>Dans cet exemple, nous avons créé un cercle bleu avec une ombre. Nous utilisons l'attribut filter pour appliquer l'effet d'ombre, défini dans l'élément filter.
Animations
Enfin, les cercles SVG peuvent également être animés pour créer des expériences interactives pour vos utilisateurs. Voici un exemple :
Les cercles SVG peuvent également être animés pour créer des expériences interactives
<!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 au clic. Nous utilisons l'élément animate pour définir l'animation et l'associer à l'élément circle via l'attribut attributeName.
Attributs
L'élément SVG <circle> prend également en charge les Attributs globaux et les Attributs d'événement.
| Attribut | Description |
|---|---|
| cx | Coordonnée x du centre du cercle. |
| cy | Coordonnée y du centre du cercle. |
| r | Rayon du cercle. Une valeur inférieure ou égale à zéro désactivera le rendu du cercle. |
| pathlength | Cet attribut spécifie la longueur totale du tracé, en unités utilisateur. |
Pratique
Quels attributs parmi les suivants sont nécessaires pour créer un élément cercle SVG en HTML ?