W3docs
pt
Entrar

SVG Elipse

Nesta página, você encontra informações sobre o elemento de forma SVG <ellipse>, aprende a criar uma elipse e vê exemplos variados.

O que é o elemento SVG <ellipse>?

O elemento SVG <ellipse> desenha uma elipse — uma forma oval, um "círculo alongado". Você a posiciona pelo seu ponto central (cx, cy) e fornece dois raios: rx para o raio horizontal e ry para o raio vertical.

Essa é a principal diferença em relação ao elemento <circle>. Um círculo tem um único raio (r) porque é igualmente largo em todas as direções. Uma elipse precisa de dois raios porque é mais larga em uma direção do que na outra:

  • Use <circle> quando a forma for perfeitamente redonda.
  • Use <ellipse> quando precisar de um oval, ou quando rx e ry devem ser diferentes.

Se você definir rx igual a ry, a elipse será renderizada como um círculo.

O sistema de coordenadas SVG

Como toda forma SVG, uma elipse é colocada na tela SVG, onde a origem (0, 0) é o canto superior esquerdo. O eixo x aumenta para a direita e o eixo y aumenta para baixo. Portanto, cx="230" cy="120" posiciona o centro da elipse 230 unidades a partir da esquerda e 120 unidades abaixo do topo. Consulte o capítulo da tag <svg> para saber mais sobre o sistema de coordenadas e o viewport.

Informação

O elemento <ellipse> não possui atributo para orientação, portanto seus eixos rx/ry são sempre horizontal e vertical. Para inclinar uma elipse, gire-a com o atributo transform (mostrado abaixo).

Exemplo do elemento 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>
Experimente Você Mesmo »

No código acima, cx="230" e cy="120" definem o centro, rx="150" faz a elipse ter 300 unidades de largura e ry="70" a faz ter 140 unidades de altura. O atributo style a preenche com rosa e adiciona um contorno azul-claro de 5 unidades.

Exemplo do elemento SVG <ellipse> para criar duas elipses sobrepostas:

<!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>
Experimente Você Mesmo »

Você pode adicionar quantas elipses quiser com cores e tamanhos diferentes.

Exemplo do elemento SVG <ellipse> para combinar duas elipses:

<!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>
Experimente Você Mesmo »

Exemplo de rotação e estilização de um <ellipse>:

Como o <ellipse> em si não possui atributo de orientação, você o inclina com o atributo transform="rotate(...)". Os dois primeiros números passados para rotate() após o ângulo são o ponto central em torno do qual girar — aqui o próprio centro da elipse, para que ela gire em seu lugar. Este exemplo também usa opacity e um contorno tracejado via stroke-dasharray:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="200">
      <ellipse cx="200" cy="100" rx="150" ry="60"
        transform="rotate(-25 200 100)"
        style="fill:plum;opacity:0.7;stroke:purple;stroke-width:4;stroke-dasharray:10,6" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>

O valor rotate(-25 200 100) gira a elipse 25 graus no sentido anti-horário em torno do ponto (200, 100), opacity:0.7 a torna levemente transparente e stroke-dasharray:10,6 desenha o contorno como traços de 10 unidades separados por lacunas de 6 unidades.

Atributos

AtributoDescrição
cxA coordenada x do centro da elipse.
cyA coordenada y do centro da elipse.
rxO raio horizontal (ao longo do eixo x).
ryO raio vertical (ao longo do eixo y).
pathLengthO comprimento total do caminho, em unidades do usuário.

O elemento SVG <ellipse> também suporta os Atributos Globais e os Atributos de Evento.

Capítulos relacionados

  • SVG <circle> — o equivalente redondo, que usa um único raio r.
  • Tag HTML SVG — o contêiner <svg>, o viewport e o sistema de coordenadas.

Prática

Prática
Quais atributos definem os dois raios de uma elipse SVG?
Quais atributos definem os dois raios de uma elipse SVG?
Was this page helpful?