Accueil    Codes    svg - ellipse
 



Html5 SVG - element ellipse  Html5 SVG - element ellipse



Création d'éléments SVG de type ellipse



L'élément ellipse permet de dessiner une ellipse. Il se base sur un point central O(cx,cy) et deux rayons : rx sur l'axe X et ry sur l'axe Y. Ses attributs sont :
    - cx : Coordonnée sur l'axe X du début du segment
    - cy : Coordonnée sur l'axe Y du début du segment
    - rx : Rayon de l'éllipse au niveau de l'axe X
    - ry : Rayon de l'éllipse au niveau de l'axe Y


Exemple SVG - Ellipse



<svg width="600" height="200" viewBox="0 0 600 200" zoomAndPan="disable"
   xmlns="http://www.w3.org/2000/svg">
   <desc>Exemple SVG - Ligne</desc>

   <ellipse cx="150" cy="30" transform="rotate(30)" rx="100" ry="80" fill="lightsteelblue" stroke="midnightblue" stroke-width="3" />
   <ellipse cx="450" cy="100" rx="120" ry="80" stroke="black" stroke-width="2" fill="none" />
</svg>