Elipse SVG
Descripción del elemento <ellipse>
El elemento SVG <ellipse> crea elipses. La elipse se centra utilizando los atributos cx y cy. Sin embargo, a diferencia del elemento <circle>, el radio en las coordenadas x e y se especifica mediante dos atributos, no uno.
peligro
Una elipse y un círculo son similares. La diferencia entre ellos es que una elipse tiene un radio x y un radio y, que difieren entre sí. El radio x y el radio y de un círculo son iguales. Las elipses no pueden definir la orientación exacta de la elipse, pero puedes rotarla con el atributo transform.
Ejemplo del elemento SVG <ellipse>:
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>Ahora expliquemos el código anterior:
- El atributo cx especifica la coordenada x del centro de la elipse.
- El atributo cy especifica la coordenada y del centro de la elipse.
- El atributo rx especifica el radio horizontal.
- El atributo ry especifica el radio vertical.
Ejemplo del elemento SVG <ellipse> para crear dos elipses una encima de la otra:
Ejemplo del elemento SVG <ellipse> para crear dos elipses una encima de la otra
<!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>Puedes añadir tantas elipses como quieras con diferentes colores y tamaños.
Ejemplo del elemento SVG <ellipse> para combinar dos elipses:
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>| Atributo | Descripción |
|---|---|
| cx | Este atributo especifica la posición x de la elipse. |
| cy | Este atributo especifica la posición y de la elipse. |
| rx | Este atributo especifica el radio de la elipse en el eje x. |
| ry | Este atributo especifica el radio de la elipse en el eje y. |
| pathlength | Este atributo especifica la longitud total de la ruta, en unidades de usuario. |
El elemento SVG <ellipse> también admite los Atributos globales y los Atributos de eventos.
Práctica
¿Qué atributos se pueden usar para definir la elipse SVG en HTML?