画椭圆 SVG <ellipse>

L'élément <ellipse> SVG est utilisé pour dessiner des ellipses. Une ellipse est un cercle dont la hauteur et la largeur ne sont pas égales. En d'autres termes, ses rayons dans les directions x et y sont différents.

Exemple d'ellipse SVG

Voici un exemple de code pour dessiner une ellipse:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<ellipse　cx="40"　cy="40"　rx="30"　ry="15"
　　　　　　　　　　　style="stroke:#00"6600; fill:#00cc00"/>
</svg>

Voici le résultat après l'exécution:

Les cx et cy de l'ellipse sont centrés comme une circle. Mais les rayons dans les directions x et y sont spécifiés par deux propriétés (pas une) : les propriétés rx et ry. Comme vous le voyez, la valeur de l'attribut rx est supérieure à celle de l'attribut ry, ce qui rend l'ellipse plus large que haute. En réglant les attributs rx et ry à des nombres identiques, vous générez un cercle.

stroke-Définir la largeur du contour

Vous pouvez utiliser la propriété de style stroke-La propriété width définit la largeur du contour de l'ellipse. Exemple :

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse　cx="50"　cy="50"　rx="40"　ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-width:　5;fill: none;"/>
</svg>

Voici l'image de résultat après l'exécution:

Ellipse de contour discontinu

Vous pouvez également utiliser la propriété de style stroke-dasharray rend les contours de l'ellipse en traits discontinus.

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse　cx="50"　cy="50"　rx="40"　ry="30"
　　　　　　　　　style="stroke: #ff0000;stroke-width:　5;
　　　　　　　　　stroke-dasharray:　10　5;fill: none;"/>
</svg>

Dans cet exemple, la largeur des traits discontinus est réglée sur10L'espace entre les traits (l'intervalle entre les traits) est réglé sur5. Voici l'apparence lors du rendu de l'ellipse:

Contour transparent

Vous pouvez utiliser la propriété de style stroke-L'opacité rend les contours de l'ellipse SVG semi-transparents.

<svg　height="120">
　　　　<ellipse　cx="50"　cy="50"　rx="40"　ry="30"
　　　　　　　　　　　　　style="stroke:　#ff0000;
　　　　　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　　　　　fill:　none;"></ellipse>
　　　　<ellipse　cx="60"　cy="60"　rx="40"　ry="30"
　　　　　　　　　　　　　style="stroke: #0000ff;
　　　　　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　　　　　stroke-opacity:　0.5;
　　　　　　　　　　　　　　　　　　　fill:　none;"></ellipse>
</svg>

Voici l'effet de l'ellipse SVG après l'exécution du code:

Notez que la deuxième ellipse (bleue) est transparente, et voyez comment on voit l'ellipse rouge à travers ses contours.

Remplissage de l'ellipse

Vous pouvez utiliser la propriété de style fill pour remplir l'ellipse :

<svg　height="120">
<ellipse　cx="50"　cy="50"　rx="40"　ry="30"
　　　　　　　　　style="stroke:　#ff0000;
　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　fill: #ff6666;"/>
</svg>

Le look de l'ellipse SVG après l'exécution est le suivant:

填充具有透明度

fill-属性样式 opacity 可用于设置一个椭圆的填充颜色的不透明度（透明性）：

<svg　height="120">
<ellipse　cx="50"　cy="50"　rx="40"　ry="30"
　　　　　　　　　style="stroke:　#ff0000;
　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　fill:　none;"></ellipse>
<ellipse　cx="60"　cy="60"　rx="40"　ry="30"
　　　　　　　　　style="stroke:　none;
　　　　　　　　　　　　　　　fill:　#0000ff;
　　　　　　　　　　　　　　　fill-opacity:　0.5;"></ellipse>
</svg>

椭圆在渲染时的外观如下：

注意第二个（蓝色）椭圆是半透明的，从而使红色的椭圆可见。