W3docs
fr
Se connecter

SVG Ellipse

Découvrez l'élément SVG <ellipse>, comment créer une ellipse et explorer différents exemples intéressants avec attributs et transformations.

Qu'est-ce que l'élément SVG <ellipse> ?

L'élément SVG <ellipse> dessine une ellipse — une forme ovale, un « cercle étiré ». Vous la positionnez par son point central (cx, cy) et lui attribuez deux rayons : rx pour le rayon horizontal et ry pour le rayon vertical.

C'est la différence essentielle par rapport à l'élément <circle>. Un cercle possède un seul rayon (r) car il est identique dans toutes les directions. Une ellipse a besoin de deux rayons car elle est plus large dans une direction que dans l'autre :

  • Utilisez <circle> lorsque la forme est parfaitement ronde.
  • Utilisez <ellipse> lorsque vous avez besoin d'un ovale, ou lorsque rx et ry doivent différer.

Si vous définissez rx égal à ry, l'ellipse s'affiche comme un cercle.

Le système de coordonnées SVG

Comme toute forme SVG, une ellipse est placée sur le canevas SVG, où l'origine (0, 0) se trouve dans le coin supérieur gauche. L'axe x augmente vers la droite et l'axe y augmente vers le bas. Ainsi, cx="230" cy="120" place le centre de l'ellipse à 230 unités depuis la gauche et à 120 unités depuis le haut. Consultez le chapitre sur la balise <svg> pour en savoir plus sur le système de coordonnées et le viewport.

Info

L'élément <ellipse> ne possède pas d'attribut d'orientation, ses axes rx/ry sont donc toujours horizontaux et verticaux. Pour incliner une ellipse, faites-la pivoter avec l'attribut transform (illustré ci-dessous).

Exemple de l'élément SVG <ellipse> :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200" >
      <ellipse cx="230" cy="120" rx="150" ry="70" style="fill:pink;stroke:lightblue;stroke-width:5" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>
Essayez vous-même »

Dans le code ci-dessus, cx="230" et cy="120" définissent le centre, rx="150" rend l'ellipse large de 300 unités, et ry="70" lui donne une hauteur de 140 unités. L'attribut style la colore en rose et lui ajoute un contour bleu clair de 5 unités.

Exemple de l'élément SVG <ellipse> pour créer deux ellipses superposées :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg  width="400" height="200">
      <ellipse cx="200" cy="110" rx="160" ry="25" style="fill:lightblue" />
      <ellipse cx="190" cy="85" rx="140" ry="20" style="fill:blue" />
      Sorry,inline SVG isn't supported by your browser. 
    </svg>
  </body>
</html>
Essayez vous-même »

Vous pouvez ajouter autant d'ellipses que vous le souhaitez avec des couleurs et des tailles différentes.

Exemple de l'élément SVG <ellipse> pour combiner deux ellipses :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="150" >
      <ellipse cx="200" cy="70" rx="200" ry="35" style="fill:purple" />
      <ellipse cx="190" cy="70" rx="160" ry="25" style="fill:lightgrey" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Essayez vous-même »

Exemple de rotation et de mise en style d'une <ellipse> :

L'élément <ellipse> ne possédant pas d'attribut d'orientation, vous l'inclinez avec l'attribut transform="rotate(...)". Les deux premiers nombres passés à rotate() après l'angle sont le point central autour duquel pivoter — ici le propre centre de l'ellipse, ce qui la fait tourner sur place. Cet exemple utilise également opacity et un contour en pointillés via stroke-dasharray :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="200" cy="100" rx="150" ry="60"
        transform="rotate(-25 200 100)"
        style="fill:plum;opacity:0.7;stroke:purple;stroke-width:4;stroke-dasharray:10,6" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

La valeur rotate(-25 200 100) fait pivoter l'ellipse de 25 degrés dans le sens antihoraire autour du point (200, 100), opacity:0.7 la rend légèrement transparente, et stroke-dasharray:10,6 trace le contour sous forme de tirets de 10 unités séparés par des espaces de 6 unités.

Attributs

AttributDescription
cxLa coordonnée x du centre de l'ellipse.
cyLa coordonnée y du centre de l'ellipse.
rxLe rayon horizontal (le long de l'axe x).
ryLe rayon vertical (le long de l'axe y).
pathLengthLa longueur totale du chemin, en unités utilisateur.

L'élément SVG <ellipse> prend également en charge les Attributs globaux et les Attributs d'événements.

Chapitres associés

  • SVG <circle> — l'équivalent rond, utilisant un seul rayon r.
  • Balise HTML SVG — le conteneur <svg>, le viewport et le système de coordonnées.

Entraînement

Pratique
Quels attributs définissent les deux rayons d'une ellipse SVG ?
Quels attributs définissent les deux rayons d'une ellipse SVG ?
Was this page helpful?