Dessiner un cercle avec SVG <circle>

<circle> est un élément de base SVG, utilisé pour créer des cercles, basé sur un centre et un rayon, et peut également utiliser les attributs stroke et fill pour dessiner des contours en ligne continue, en tirets et pour remplir la couleur du cercle.

SVG <circle> est utilisé pour dessiner des cercles. Voici un exemple simple:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>

Voici l'image de résultat de l'exécution

Ce cercle a pour centre de gravité les points cx, cy et pour rayon r. cx, cy et r sont des attributs de l'élément <circle>.

Contour circulaire

Vous pouvez utiliser l'attribut de style stroke pour définir le contour (contour) du cercle SVG. Dans le premier exemple de cette page, les traits sont définis sur #006600 vert profond. Cependant, vous pouvez non seulement définir la couleur du trait, mais aussi d'autres choses. Vous pouvez également utiliser stroke-L'attribut widthstyle définit la largeur du trait. Voici un exemple:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　fill: #00cc00"/></svg>

Voici l'apparence du cercle après l'exécution:

Vous pouvez également utiliser stroke-L'attribut dasharray dessine le contour en tirets. Voici un exemple:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　fill: #00cc00"/></svg>

Voici l'apparence après le rendu:

Vous pouvez également supprimer le contour du cercle (bordure) et le remplir uniquement avec la couleur de remplissage. Voici un exemple de code:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: #"
　　　　　　　　　　　fill: #00cc00"/></svg>

Voici l'effet après l'exécution du cercle sans bordure:

Remplissage du cercle

L'attribut de style fill contrôle le remplissage du cercle. En définissant l'attribut fill sur none, vous pouvez choisir de ne pas remplir du tout.
Voici un exemple:

Voici l'apparence du cercle sans remplissage:

Vous pouvez utiliser l'attribut fill pour définir la couleur de remplissage, comme mentionné précédemment dans cet article, voici un exemple de code:

<svg height="80px"><circle cx="40" cy="40" r="24"
　　　　style="stroke: #"660066;
　　　　　　　　　　　fill: #00ff00"/></svg>

Voici l'apparence du remplissage et de la couleur de remplissage du cercle dessiné:

Vous pouvez également utiliser fill-L'attribut de style opacity définit le remplissage en transparence. L'exemple suivant dessine deux cercles, l'un partiellement situé au-dessus de l'autre et est semi-transparent.

<svg height="80px">
　　　　<circle cx="40" cy="40" r="24" style="stroke:　#660000;
　　　　　　　　　　　　　　　　　　　fill:　#cc0000;
　　　　　　　　　　　　></circle>
　　　　<circle cx="64" cy="40" r="24" style="stroke:　#000099;
　　　　　　　　　　　　　　　　　　　fill:　#0000cc;
　　　　　　　　　　　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　　　　　></circle>
</svg>

L'effet de exécution est le suivant:

Veuillez noter que le cercle bleu (droite) est maintenant semi-transparent à l'intérieur. Pour rendre les traits semi-transparent également, il faut utiliser stroke-Propriété opacitystyle.