SVG <elipse>
Elipse SVG - <elipse>
O elemento <ellipse> é usado para criar uma elipse.
Uma elipse está intimamente relacionada com um círculo. A diferença é que uma elipse tem um raio x e ay que difere um do outro, enquanto um círculo tem raios x e y iguais:
Exemplo 1
O exemplo a seguir cria uma elipse:
Segue 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>
Explicação do código:
- O atributo cx define a coordenada x do centro da elipse
- O atributo cy define a coordenada y do centro da elipse
- O atributo rx define o raio horizontal
- O atributo ry define o raio vertical
Exemplo 2
O exemplo a seguir cria três elipses umas sobre as outras:
Segue 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>
Exemplo 3
O exemplo a seguir combina duas elipses (uma amarela e uma branca):
Segue 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>