Los últimos tutoriales de desarrollo web
 

SVG <Elipse>


SVG Elipse - <elipse>

La <ellipse> elemento se utiliza para crear una elipse.

Una elipse está estrechamente relacionado con un círculo. La diferencia es que una elipse tiene un radio x y ay que difiere de unos a otros, mientras que un círculo tiene la igualdad de x y radio y:


Ejemplo 1

En el siguiente ejemplo se crea una elipse:

Lo sentimos, su navegador no soporta SVG en línea.

Aquí está el código SVG:

Ejemplo

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

Code explanation:

  • El cx atributo define la coordenada x del centro de la elipse
  • El cy atributo define la coordenada y del centro de la elipse
  • El rx atributo define el radio horizontal
  • El ry atributo define el radio vertical,

Ejemplo 2

El siguiente ejemplo crea tres elipses, en uno encima del otro:

Lo sentimos, su navegador no soporta SVG en línea.

Aquí está el código SVG:

Ejemplo

<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>
Inténtalo tú mismo "

Ejemplo 3

El ejemplo siguiente combina dos elipses (one yellow and one white) :

Lo sentimos, su navegador no soporta SVG en línea.

Aquí está el código SVG:

Ejemplo

<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>
Inténtalo tú mismo "