SVG <ellipse>

Elipse SVG - <ellipse>

<ellipse> El elemento se utiliza para crear elipses.

La elipse está muy relacionada con el círculo. La diferencia radica en que los radios x e y de la elipse son diferentes, mientras que el círculo tiene radios x e y iguales:

Ejemplo 1

El siguiente ejemplo crea una elipse:

Esto es el código SVG:

<svg height="140" width="500">
  <ellipse cx="200" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

Prueba personalmente

Explicación del código:

• La propiedad cx define la coordenada x del centro de la elipse
• La propiedad cy define la coordenada y del centro de la elipse
• La propiedad rx define el radio horizontal
• La propiedad ry define el radio vertical

Ejemplo 2

El siguiente ejemplo crea tres elipses superpuestas:

Esto es el código SVG:

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

Prueba personalmente

Ejemplo 3

El siguiente ejemplo combina dos elipses (una amarilla y una blanca):

Esto es el código SVG:

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

Prueba personalmente