Ellipse SVG
L'élément
Exemple 1
lt;ellipse> est utilisé pour créer une ellipse :
Une ellipse est très similaire à un cercle. . La différence est que les ellipses ont des rayons x et y différents, tandis que les cercles ont les mêmes rayons x et y :
Voici le code SVG :
Exemple
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Pour les utilisateurs d'Opera : Afficher le fichier SVG (clic droit sur la source d'aperçu graphique SVG).
Analyse du code :
La coordonnée x du centre de l'ellipse définie par l'attribut CX
Attribut CY La coordonnée y du centre de l'ellipse défini
Le rayon horizontal défini par l'attribut RX
Le rayon vertical défini par le RY attribut
Exemple 2
L'exemple suivant crée trois ovales empilés :
Ce qui suit est le code SVG :
Exemple
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" /> <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" /> <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" /> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Pour les utilisateurs d'Opera : Affichez le fichier SVG (clic droit sur la source d'aperçu graphique SVG).
Exemple 3
L'exemple suivant combine deux ovales (un jaune et un blanc) :
Voici le code SVG :
Instance
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" /> <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white" /> </svg> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Pour Utilisateurs d'Opera : affichez les fichiers SVG (cliquez avec le bouton droit sur la source d'aperçu graphique SVG).
