SVG Ellipse<ellipse>

En SVG, l'<ellipse>élément est utilisé pour dessiner des ellipses, et il fait partie des formes de base couramment utilisées dans SVG.

En utilisant la<ellipse>élément, vous pouvez créer des formes elliptiques et contrôler la position, la taille et le style de l'ellipse en définissant des attributs.

Syntaxe de base

<ellipse
  cx="x-coordinate"      <!-- 椭圆中心点的 x 坐标 -->
  cy="y-coordinate"      <!-- 椭圆中心点的 y 坐标 -->
  rx="x-radius"          <!-- 椭圆水平轴的半径 -->
  ry="y-radius"          <!-- 椭圆垂直轴的半径 -->
  fill="fill-color"      <!-- 椭圆的填充颜色 -->
  stroke="stroke-color"  <!-- 椭圆的描边颜色 -->
  stroke-width="width"   <!-- 椭圆的描边宽度 -->
/>

Explication des attributs :

• cxetcyL'attribut définit les coordonnées du point central de l'ellipse, c'est-à-dire la position du centre de l'ellipse.

• rxL'attribut définit le rayon de l'axe horizontal de l'ellipse (axe x).

• ryL'attribut définit le rayon de l'axe vertical de l'ellipse (axe y).

• fillL'attribut définit la couleur de remplissage de l'ellipse.

• strokeL'attribut définit la couleur du contour de l'ellipse.

• stroke-widthL'attribut définit la largeur du contour de l'ellipse.

Le code suivant dessine une ellipse avec un remplissage bleu, un contour noir, un rayon d'axe horizontal de 80 pixels, un rayon d'axe vertical de 50 pixels et des coordonnées de centre de (100, 100).

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="100" rx="80" ry="50" fill="blue" stroke="black" stroke-width="2" />
</svg>

Exemple 1

Une ellipse est très similaire à un cercle, sauf que l'ellipse a des rayons x et y différents, tandis qu'un cercle a les mêmes rayons x et y.

Voici le code SVG :

Cliquez pour voir :。

Explication du code :

• L'attribut CX définit la coordonnée x du centre de l'ellipse.
• L'attribut CY définit la coordonnée y du centre de l'ellipse.
• L'attribut RX définit le rayon horizontal.
• L'attribut RY définit le rayon vertical.

Exemple 2

L'exemple suivant crée trois ellipses empilées les unes sur les autres.

Voici le code SVG :

Cliquez pour voir :。

---

Exemple 3

L'exemple suivant combine deux ellipses (une jaune et une blanche).

Voici le code SVG :

Cliquez pour voir :。

Autres extensions