SVG Ellipse - <elipse>
O <ellipse> elemento é usado para criar uma elipse.
Uma elipse está intimamente relacionado com um círculo. A diferença é que uma elipse tem um raio X e ay que é diferente uma da outra, enquanto tem um círculo iguais x e y raio:
exemplo 1
O exemplo a seguir cria uma elipse:
Aqui está o código SVG:
Exemplo
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
Tente você mesmo " Code explanation:
- O cx atributo define a coordenada x do centro da elipse
- O cy atributo define a coordenada y do centro da elipse
- O rx atributo define o raio horizontal
- O ry atributo define o raio verticais
exemplo 2
O exemplo a seguir cria três elipses em cima uns dos outros:
Aqui está o código SVG:
Exemplo
<svg height="150" width="500">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow" />
</svg>
Tente você mesmo " exemplo 3
O exemplo a seguir combina duas elipses (one yellow and one white) :
Aqui está o código SVG:
Exemplo
<svg height="100" width="500">
<ellipse cx="240" cy="50" rx="220" ry="30"
style="fill:yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20"
style="fill:white" />
</svg>
Tente você mesmo "