En SVG (Scalable Vector Graphics), puedes dibujar elipses utilizando el elemento <ellipse>
. Este elemento toma varios atributos para definir la posición, el tamaño y otros aspectos de la elipse. Aquí tienes un ejemplo básico y algunos ejemplos adicionales para ilustrar diferentes casos:
xml<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="80" ry="40" fill="blue" />
</svg>
En este ejemplo, se dibuja una elipse con centro en las coordenadas (100, 50)
, un radio horizontal (rx
) de 80 unidades y un radio vertical (ry
) de 40 unidades. La elipse se llena con un color azul.
xml<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="80" ry="40" fill="green" stroke="black" stroke-width="2" />
</svg>
En este ejemplo, se añaden atributos adicionales. El borde de la elipse se dibuja con un trazo negro de 2 unidades de ancho.
xml<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="80" cy="80" rx="70" ry="40" fill="orange" />
<ellipse cx="220" cy="120" rx="50" ry="30" fill="purple" />
</svg>
Aquí, se dibujan dos elipses en el mismo lienzo SVG.
xml<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="80" ry="40" fill="rgba(255,0,0,0.5)" />
</svg>
La elipse tiene un relleno rojo con una transparencia del 50%.
Estos son solo ejemplos básicos, pero SVG ofrece más opciones y atributos para controlar las elipses, como las transformaciones, gradientes, etc. Puedes experimentar con diferentes valores y atributos para lograr el efecto deseado en tus elipses.