La balise SVG ellipse

Le code SVG correspondant

Il y a bien sûr toujours une règle de style pour centrer et bordurer le canevas SVG dans la page.

<svg width = "400" height = "200" > <title>ellipse avec SVG : balise ellipse</title> <ellipse cx="200" cy="100" rx="200" ry="100" fill="lightgreen" stroke="red" stroke-width="2"/> </svg>

Commentaire du code

Code SVG écrit directement dans la page web.

Vous pouvez observer une belle ellipse remplie de vert clair et bordurée de rouge

Utiliser la balise ellipse pour dessiner un cercle

On peut considérer (comme le fait le logiciel Inkscape) un cercle comme une forme particulière d'ellipse : rayon horizontal identique au rayon vertical. Cercle dessiné avec la balise ellipse

Ci-dessus un cercle dessiné grâce à la balise ellipse.

Le code SVG correspondant :

<svg height = "400" width = "400" > <title>Cercle dessiné la balise ellipse</title> <ellipse cx="200" cy="200" rx="150" ry="150" style = "background : red;" /> </svg>

Remarquez que la valeur de l'attribut rx identique à la valeur de l'attribut ry.

Il y a un bug dans le code. La forme est remplie de noir alors que dans le code je précise un fond rouge.
En effet pour un objet SVG il faut utiliser fill (en attribut ou en propriété) pour le remplissage de la forme et surtout pas background.
Retour menu