feed twitter facebook LinkedIn facebook

SVG » Dibujar una elipse en SVG

Enero 11, 2008 por Víctor Cuervo . 7175 visitas 3 Comentarios Imprimir Imprimir

Si queremos dibujar una elipse en SVG deberemos de utilizar la etiqueta <ELLIPSE/>. En este caso lo que vamos a hacer es dibujar una elipse de 50x100 de color rojo.

La forma de configurarla es muy sencilla. En primer lugar lo que hay que hacer es posicionarla en el eje de coordenadas mediante los atributos cx y cy.

  1. <ELLIPSE cx="100" cy="100"/>

Una vez posicionada deberemos de darle un valor de radio de ancho y alto. En este caso utilizaremos los atributos rx y ry. Mediante rx especificamos el radio horizontal de la elipse y mediante ry el radio vertical.

  1. <ELLIPSE cx="100" cy="100" rx="100" ry="50"/>

Lo último que nos quedará será el rellenar la elipse del color elegido. Rojo en nuestro caso. Para ello utilizamos la propiedad de pintado fill dandole el nombre en ingles del color.

  1. <ELLIPSE cx="100" cy="100" rx="100" ry="50" fill="red"/>


Visualizar el ejemplo
| Descargar el código

tags: ,

Artículos relacionados:

3 comentarios »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

  1. ana
    Noviembre 8, 2008 #

    no en¨tendi nada jeje…

  2. jotace
    Noviembre 26, 2008 #

    ¿Y si quiero poner el borde de otro color o el relleno transparente?

  3. lineadecodigo
    Diciembre 2, 2008 #

    Para el tema del borde puedes leerte Circulos con Borde. Que aunque habla como hacerlo sobre un borde es muy fácilmente aplicable a la elipse.

    Con respecto a lo del relleno transparente es bueno que le eches un ojo a Transparencia y Opacidad en SVG, te dará todas las pistas.

    Espero que ambos enlaces te sirvan de ayuda.

Deje un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*