Crear elipses SVG con código HTML, es tan simple como emplear la etiqueta 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 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:
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>
