En SVG (Scalable Vector Graphics), vous pouvez créer des ellipses en utilisant l'élément <ellipse>
. Une ellipse est définie par son centre (cx, cy), son rayon horizontal (rx) et son rayon vertical (ry). Voici un exemple simple et quelques variantes pour illustrer différentes utilisations :
xml<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="50" rx="40" ry="20" fill="blue" />
</svg>
Dans cet exemple, une ellipse est créée avec un centre à (50, 50), un rayon horizontal de 40 et un rayon vertical de 20. Elle est remplie en bleu.
xml<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="50" rx="40" ry="20" fill="yellow" stroke="black" stroke-width="2" />
</svg>
Cette ellipse a une bordure noire de 2 pixels d'épaisseur en plus de sa couleur de remplissage jaune.
xml<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="50" cy="50" rx="40" ry="20" fill="green">
<animate attributeName="rx" values="40;20;40" dur="2s" repeatCount="indefinite" />
</ellipse>
</svg>
Cette ellipse subit une animation qui change la valeur du rayon horizontal (rx) de 40 à 20, puis de 20 à 40 de manière répétitive sur une période de 2 secondes.
xml<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad" 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>
<ellipse cx="50" cy="50" rx="40" ry="20" fill="url(#grad)" />
</svg>
Dans cet exemple, une ellipse est remplie avec un dégradé linéaire allant du jaune au rouge.
Ces exemples devraient vous donner une idée de la manière de créer et personnaliser des ellipses en SVG. N'hésitez pas à expérimenter avec d'autres attributs et styles pour obtenir les effets souhaités.