Desenhar Elipse com SVG <ellipse>

O elemento <ellipse> do SVG é usado para desenhar elípses. Os elípses são círculos cuja altura e largura não são iguais. Em outras palavras, seus raios nas direções x e y são diferentes.

Exemplo de elipse SVG

Este é um exemplo de código para desenhar um elipse:

<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:#006600; fill:#00cc00"/>
</svg>

O resultado após a execução é o seguinte:

Os cx e cy do elipse, como a circunferência, ficam no centro. Mas o raio nas direções x e y é especificado por dois atributos (não por um), rx e ry atributos. Como você vê, o atributo rx tem um valor maior do que o atributo ry, tornando o elipse mais largo que sua altura. Definir os atributos rx e ry com o mesmo número gera um círculo.

stroke-Configuração da largura da borda

Você pode usar a propriedade style stroke-width define a largura da borda do elipse. Exemplo:

<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>

A imagem do resultado após a execução é a seguinte:

Elipse com borda tracejada

Você também pode usar a propriedade de estilo stroke-dasharray faz o contorno do elipse se tornar tracejado.

<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>

Neste exemplo, a largura das linhas tracejadas é configurada para10, o espaço entre as linhas tracejadas (intervalo entre as linhas tracejadas) é configurado para5. Isso é a aparência ao renderizar o elipse:

Borda transparente

Você pode usar a propriedade style stroke-A propriedade opacity torna a borda do elipse SVG semi-transparente.

<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>

A aparência do efeito elipse SVG após a execução do código é a seguinte:

Observe que o segundo elipse (azul) é transparente e como é possível ver o elipse vermelho através da sua contorno.

Preenchimento do elipse

Você pode usar a propriedade de estilo fill para preencher o elipse:

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

A aparência do SVG elipse após a execução é a seguinte:

Preenchimento com opacidade

fill-A propriedade de estilo de opacidade pode ser usada para definir a opacidade (transparência) da cor de preenchimento de uma elipse:

<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>

A aparência da elipse durante a renderização é a seguinte:

Atenção, a segunda elipse (azul) é semi-transparente, permitindo que a elipse vermelha seja visível.