Ellipse SVG
Description de l'élément <ellipse>
L'élément SVG <ellipse> permet de créer des ellipses. L'ellipse est centrée à l'aide des attributs cx et cy. Cependant, contrairement à l'élément <circle>, le rayon selon les axes x et y est spécifié par deux attributs et non un seul.
DANGER
Une ellipse et un cercle se ressemblent. La différence entre les deux est qu'une ellipse possède un rayon x et un rayon y, qui sont différents l'un de l'autre. Pour un cercle, les rayons x et y sont égaux. Une ellipse ne peut pas définir son orientation exacte, mais vous pouvez la faire pivoter à l'aide de l'attribut transform.
Exemple de l'élément SVG <ellipse> :
Exemple de l'élément SVG <ellipse>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200" >
<ellipse cx="230" cy="120" rx="150" ry="70" style="fill:pink;stroke:lightblue;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Expliquons maintenant le code ci-dessus :
- L'attribut cx spécifie la coordonnée x du centre de l'ellipse.
- L'attribut cy spécifie la coordonnée y du centre de l'ellipse.
- L'attribut rx spécifie le rayon horizontal.
- L'attribut ry spécifie le rayon vertical.
Exemple de l'élément SVG <ellipse> pour créer deux ellipses superposées :
Exemple de l'élément SVG <ellipse> pour créer deux ellipses superposées
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<ellipse cx="200" cy="110" rx="160" ry="25" style="fill:lightblue" />
<ellipse cx="190" cy="85" rx="140" ry="20" style="fill:blue" />
Sorry,inline SVG isn't supported by your browser.
</svg>
</body>
</html>Vous pouvez ajouter autant d'ellipses que vous le souhaitez, avec différentes couleurs et tailles.
Exemple de l'élément SVG <ellipse> pour combiner deux ellipses :
Exemple de l'élément SVG <ellipse> pour combiner deux ellipses :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="150" >
<ellipse cx="200" cy="70" rx="200" ry="35" style="fill:purple" />
<ellipse cx="190" cy="70" rx="160" ry="25" style="fill:lightgrey" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>| Attribut | Description | |---|- --| | cx | Cet attribut spécifie la position x de l'ellipse. | | cy | Cet attribut spécifie la position y de l'ellipse. | | rx | Cet attribut spécifie le rayon de l'ellipse sur l'axe x. | | ry | Cet attribut spécifie le rayon de l'ellipse sur l'axe y. | | pathlength | Cet attribut spécifie la longueur totale du tracé, en unités utilisateur. |
L'élément SVG <ellipse> prend également en charge les Attributs globaux et les Attributs d'événement.
Pratique
Quels attributs peuvent être utilisés pour définir une ellipse SVG en HTML ?