Il existe au moins 3 façons de tracer un cercle en SVG, les voici de la plus simple à la plus compliquée :
1) au moyen de la balise <circle>,
2) en combinant deux demi cercles dans un chemin,
3) grâce à 4 courbes de Bézier formant chacune un quart de cercle.
Pourquoi se compliquer la vie alors que la balise <circle> est si facile d’utilisation ?
Parce que le cercle ainsi réalisé ne peut pas faire partie d’un chemin, “path” et “circle” étant des éléments différents.
L’intérêt d’intégrer un cercle dans un chemin est de permettre par exemple de réaliser un trou circulaire au sein d’un chemin, ce qui serait impossible à réaliser avec un cercle.
Dans le fichier SVG suivant, j’ai combiné les trois techniques, du plus complexe au plus simple.
Tout d’abord je dessine une croix qui va me permetttre de centrer mes cercles :
M 10 270 H 530
M 270 10 V 530
Je dessine ensuite mes 4 arcs de cercles en courbes de Bézier (cercle n°1), j’utilise à cet effet la fonction C (curveto en valeur absolue) :
M 270 20
C 132 20 20 132 20 270
C 20 408 132 520 270 520
C 408 520 520 408 520 270
C 520 132 408 20 270 20 z
Je trace un second cercle (cercle n°2), plus petit en joignant deux arcs de cercles à 180° créés avec la fonction a (arc en valeur relative) :
a 100 100 0 0 1 100 200
a 100 100 0 0 1 -100 -200
Puis je ferme mon chemin et je dessine un petit cercle rouge (cercle n°3) au centre :
circle cx=”270″ cy=”270″ r=”20″.
On voit bien que le cercle n°2 crée un trou dans le chemin et laisse apparaître la couleur de fond du navigateur (blanc la plupart du temps).
Ce qui n’aurait pas pu être réalisé avec l’élément circle.
Le code complet du fichier SVG est ici :
<svg viewBox=”0 0 540 540″ xmlns=”http://www.w3.org/2000/svg”>
<path style=”fill:#999;stroke:#000;stroke-width:2;”
d=”
M 10 270 H 530
M 270 10 V 530
M 270 20
C 132 20 20 132 20 270
C 20 408 132 520 270 520
C 408 520 520 408 520 270
C 520 132 408 20 270 20 z
M 220 170
a 100 100 0 0 1 100 200
a 100 100 0 0 1 -100 -200
z “/>
<circle cx=”270″ cy=”270″ r=”20″ stroke=”black” stroke-width=”2″ fill=”red” />
</svg>