La balise SVG ellipse

Pour dessiner un rectangle il faut utiliser la balise RECT, pour un cercle la balise CIRCLE et pour une ellipse la balise ELLIPSE !

Premier exemple

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

Le code SVG correspondant 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>

Deuxième exemple

Le code SVG correspondant

<svg width = "300" height = "300" style ="background : yellow ; box-shadow : 10px 10px 10px gray;"> <ellipse cx="50%" cy="50%" rx="15%" ry="30%" style ="fill : olive; stroke : red; stroke-width : 4 ;"/> </svg>

Commentaire

Code SVG est ici écrit directement dans la page web donc à l'intérieur du conteneur SVG.
La balise SVG est un élément HTML (appartient au DOM HTML) donc on peut styler avec les propriétés background, box-shadow, etc.
On peut positionner et dimensionner une forme SVG avec des paramètres exprimés en pourcentage ; les attributs cx et rx en % de la largeur du canevas (300) et cy et ry en % de la hauteur du canevas (300).
Si la dimension ou la taille est exprimée en pixels l'unité de mesure peut être implicite !

Dans la syntaxe SVG Le style d'un élément peut être exprimé sous forme d'attributs (fill, stroke,etc.) OU des propriétés (via l'attribut style).
Mais les paramètres de position et de dimension doivent toujours être des attributs !

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" style ="background : yellow ; box-shadow : 10px 10px 10px gray;"> <title>Cercle dessiné avec la balise ellipse</title> <ellipse cx="50%" cy="50%" rx="150" ry="150" style = "background : red; box-shadow : 5px 5px 5px red;" /> </svg>

Il y a un bug dans le code. La forme est remplie de noir sans ombrage alors que dans le code je précise un fond rouge avec ombrage.
Les propriétés background, box-shadow, border, border-radius, opacity, etc. ne sont pas disponibles pour les éléments SVG !
Il faut utiliser les mots fill, fill-opacity, stroke, stroke-width, stroke-opacity, stroke-linejoin, etc. Quant à ombrer une forme il faut utiliser un filtre SVG.

Retour menu