W3docs
es
Iniciar sesión

SVG Ellipse

En esta página encontrarás información sobre el elemento SVG <ellipse>, aprenderás a crear una elipse con él y verás ejemplos variados e interesantes.

¿Qué es el elemento SVG <ellipse>?

El elemento SVG <ellipse> dibuja una elipse — una forma ovalada, un "círculo estirado". Se posiciona mediante su punto central (cx, cy) y se le asignan dos radios: rx para el radio horizontal y ry para el radio vertical.

Esta es la diferencia clave respecto al elemento <circle>. Un círculo tiene un único radio (r) porque es igual de ancho en todas las direcciones. Una elipse necesita dos radios porque es más ancha en una dirección que en la otra:

  • Usa <circle> cuando la forma sea perfectamente redonda.
  • Usa <ellipse> cuando necesites un óvalo, o cuando rx y ry deban ser distintos.

Si estableces rx igual a ry, la elipse se renderiza como un círculo.

El sistema de coordenadas SVG

Como cualquier forma SVG, una elipse se coloca en el lienzo SVG, donde el origen (0, 0) es la esquina superior izquierda. El eje x aumenta hacia la derecha y el eje y aumenta hacia abajo. Por lo tanto, cx="230" cy="120" sitúa el centro de la elipse a 230 unidades de la izquierda y 120 unidades hacia abajo desde la parte superior. Consulta el capítulo de la etiqueta <svg> para obtener más información sobre el sistema de coordenadas y el viewport.

Información

El elemento <ellipse> no tiene ningún atributo de orientación, por lo que sus ejes rx/ry son siempre horizontal y vertical. Para inclinar una elipse, rótala con el atributo transform (se muestra más adelante).

Ejemplo del 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>
Pruébalo tú mismo »

En el código anterior, cx="230" y cy="120" establecen el centro, rx="150" hace que la elipse tenga 300 unidades de ancho y ry="70" la hace 140 unidades de alto. El atributo style la rellena de color rosa y le aplica un contorno azul claro de 5 unidades.

Ejemplo del elemento SVG <ellipse> para crear dos elipses superpuestas:

<!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>
Pruébalo tú mismo »

Puedes agregar tantas elipses como desees con diferentes colores y tamaños.

Ejemplo del elemento SVG <ellipse> para combinar dos 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>
Pruébalo tú mismo »

Ejemplo de rotación y estilado de un <ellipse>:

Dado que <ellipse> no tiene atributo de orientación propio, se inclina con el atributo transform="rotate(...)". Los dos primeros números que se pasan a rotate() después del ángulo son el punto central alrededor del cual se rota — aquí el propio centro de la elipse, de modo que gira en su lugar. Este ejemplo también usa opacity y un contorno discontinuo mediante 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>

El valor rotate(-25 200 100) rota la elipse 25 grados en sentido antihorario alrededor del punto (200, 100), opacity:0.7 la hace ligeramente transparente y stroke-dasharray:10,6 dibuja el contorno como trazos de 10 unidades separados por espacios de 6 unidades.

Atributos

AtributoDescripción
cxLa coordenada x del centro de la elipse.
cyLa coordenada y del centro de la elipse.
rxEl radio horizontal (a lo largo del eje x).
ryEl radio vertical (a lo largo del eje y).
pathLengthLa longitud total del trazado, en unidades de usuario.

El elemento SVG <ellipse> también admite los Atributos Globales y los Atributos de Evento.

Capítulos relacionados

Práctica

Práctica
¿Qué atributos establecen los dos radios de una elipse SVG?
¿Qué atributos establecen los dos radios de una elipse SVG?
Was this page helpful?