Elipses SVG en HTML5

Anterior
Avanzar

Continuando con las formas SVG, en esta lección toca aprender a crear elipses con código HTML, es tan simple como emplear la etiqueta <ellipse/> y mediante atributos establecer el aspecto que deseamos conseguir.

La elipse

Una elipse es una figura geométrica curva y cerrada, con dos ejes perpendiculares, posee un centro y un eje menor (ry) y eje mayor (rx) según sea el caso, en esta lección nos enfocaremos a crear mediante código HTML:

Etiqueta ellipse

Para dibujar una elipse utilizamos la etiqueta <ellipse/> dentro del elemento SVG de la siguiente manera:

<svg>
  <ellipse/>
</svg>

Posición

La posición de la elipse dentro de SVG es similar a la del círculo que conocimos en la lección anterior. También esta definida por la posición de su centro.

La posición del centro esta dada por el punto (cx,cy) y se determina mediante atributos, recordemos que el punto (0,0) corresponde a la esquina superior izquierda del lienzo SVG más no de la pantalla.

  • cx.- distancia del centro al borde derecho del lienzo SVG (posición en el eje X)
  • cy.- distancia del centro al borde superior del lienzo SVG (posición en el eje Y)
<svg>
  <ellipse cx="150" cy="120"/>
</svg>

Dimensión de elipse

Sabemos que una elipse posee un eje mayor y otro menor, para establecer sus dimensiones utilizaremos los atributos rx y ry.

  • rx.- dimensión del eje en el eje X.
  • ry.- dimensión del eje en el eje Y.

Ejemplo:

<svg width="400px" height="300px">
  <ellipse cx="150" cy="120" rx="140" ry="80"/>
</svg>

Resultado:

Te recomendamos leer:  Círculos svg en html5

Por defecto el resultado será una elipse con relleno de color negro, a continuación recordaremos las propiedades para cpntrolar la apariencia del elemento elipse.

Aspecto de la elipse

Para dotar de cierto aspecto utilizamos las propiedades y atributos que venimos aprendiendo desde lecciones anteriores, aquí te recuerdo algunas:

  • fill.- color de relleno.
  • stroke.- color de borde.
  • stroke-width.- ancho del borde

Ejemplo:

<svg>
  <ellipse cx="150" cy="120" rx="140" ry="80" />
</svg>

Ejemplos de elipse SVG

El primer ejemplo se trata de crear una elipse con las siguientes características: color de relleno naranja, sin borde, dimensión de eje mayor en X de 150px y dimensiion de eje menor en Y de 40px, posicion del centro en ele punto (200,120)

<svg width="400px" height="300px">
  <ellipse cx="200" cy="120" rx="150" ry="40" fill="orange" stroke="none"/>
</svg>

Resultado:

Lecciones de HTML5
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5