Círculos svg en html5

Anterior
Avanzar

Continuando con las lecciones, hoy aprenderemos a crear un círculo en SVG con HTML5, es más fácil de lo que puedas imaginar, simplemente definimos la posición del centro de dicho círculo y por otro lado el radio que deseamos colocar, además de ello aplicaremos las propiedades para definir su apariencia. Veamos cómo hacerlo.

Etiqueta circle

Para dibujar un circulo SVG, simplemente creamos la etiqueta <circle/> dentro de la etiqueta SVG, de la siguiente manera:

<svg>
  <circle/>
</svg>

Posición del círculo

La ubicación del círculo dentro del lienzo SVG está definido por la posición de su centro (cx,cy) y la dimensión de radio (r) que posee.

Para establecer la posición del centro, declaramos las propiedades cx y cy, de tal manera que el par ordenado (cx,cy) es el punto donde se encuentra dicho centro, los mismos que se establecen mediante atributos en la etiqueta <circle/>.

  • cx.- posición del centro en el eje X.
  • cy.- posición del centro en el eje Y.

Recuerda que el punto de origen de coordenadas para SVG en HTML es la esquina superior izquierda del lienzo SVG.

Observa el gráfico representativo para entender mejor la posición de un circulo en SVG.

Ejemplo de centro

<svg>
  <circle cx="100" cy="80"/>
</svg>

Este código de ejemplo aún no mostrará ningún resultado, pues todavía falta establecer más características. Sigamos.

Radio del círculo SVG

El radio de un círculo es la distancia del centro hacia cualquier punto del círculo, seguro que ya sabias…Pero ¿Cómo ponemos definimos en HTML5? Sencillo, para ello utilizaremos la propiedad r dentro de la etiqueta <circle/> y en su valor colocaremos la dimensión de dicho radio. Veamos un ejemplo:

<svg width="400px" height="400px">
  <circle cx="200" cy="180" r="100"/>
</svg>

Resultado:

Te recomendamos leer:  Formularios en html5

Por defecto, los círculos son rellenados con color negro.

Controlando la apariencia

Para controlar el aspecto de nuestro círculo, seguiremos empleando las propiedades antes conocidas en anteriores lecciones de formas SVG, a continuación te recuerdo cuáles son:

  • fill.- para determinar el color de relleno del círculo.
  • stroke.- borde del círculo.

Aplicación

Ahora que hemos conocido cómo crear círculos en HTML5, realizaremos ejercicios aplicativos.

El primer ejercicio consiste en crear un círculo con centro en la posición (120,150) con un radio de de 80px, color de relleno verde y borde azul con ancho de 5px.

<svg width="400px" height="400px">
  <circle cx="120" cy="150" r="80" fill="green" stroke="blue" stroke-width="5px"/>
</svg>

El segundo ejercicio consiste en recrear una figura que consiste en un grupo de círculos una dentro de otra, con colores de relleno y anchos de borde diferentes, de tal manera que el resultado aparente una figura tridimensional, utiliza tu creatividad y emplea diversos estilos.

<svg width="337px" height="292px">

<circle cx="184" cy="150" r="117" fill="#a19e03" stroke="#0e0e8a" stroke-width="0.5px"/>
<circle cx="177" cy="150" r="109" fill="#adaa03" stroke="#0e0e8a" stroke-width="1px"/>
<circle cx="167" cy="150" r="96" fill="#b5b204" stroke="#0e0e8a"  stroke-width="1.5px"/>
<circle cx="159" cy="150" r="83" fill="#bfbc06" stroke="#0e0e8a"  stroke-width="2px"/>
<circle cx="150" cy="150" r="70" fill="#c7c406" stroke="#0e0e8a"  stroke-width="2.5px"/>
<circle cx="142" cy="150" r="60" fill="#d6d304" stroke="#0e0e8a"  stroke-width="3px"/>
<circle cx="131" cy="150" r="45" fill="#e3e005" stroke="#0e0e8a"  stroke-width="3.5px"/>
<circle cx="124" cy="150" r="34" fill="#ebe807" stroke="#0e0e8a"  stroke-width="4px"/>
<circle cx="116" cy="150" r="21" fill="#f5f207" stroke="#0e0e8a"  stroke-width="4.5px"/>
<circle cx="110" cy="150" r="10" fill="#fffc03" stroke="#0e0e8a"  stroke-width="5px"/>
</svg>

Para este ejemplo hemos empleado código de colores hexadecimales, tanto para el relleno y borde, si aún no sabias, en HTML todos los colores pueden ser representados mediante un valor hexadecimal, por ahora solo lo mencionamos.

Resultado:

El resultado aparenta ser un solido en forma de cono o quizá un agujero cilíndrico, pues dejo a perspectiva personal. Aquí nuestro objetivo es practicar, no vale que copies y pegues el código, ¡Venga! escribe tu mismo y trata de hacerlo sin ver el código. Cuando tengas dificultades, pues entonces revisas el código.

Te recomendamos leer:  Etiqueta de audio HTML5 - Cómo crear un reproductor

El tercer ejemplo se trata de un crear una figura de gusanito, estoy seguro de que aquí aún recuerdan los gusanitos que os hacían dibujar cuando eran niños. Bueno, lo hacíamos a pulso y con bastante material. Ahora que ya estás grande te toca hacerlo mediante código HTML. ¡Tú puedes, vamos!

<svg width="477px" height="383px">

<circle cx="402" cy="192" r="37" fill="#f2aa18" stroke="#0e0e8a" stroke-width="0.5px"/>
<circle cx="344" cy="224" r="47" fill="#e62e84" stroke="#0e0e8a" stroke-width="1px"/>
<circle cx="274" cy="229" r="47" fill="#88d13f" stroke="#0e0e8a"  stroke-width="1.5px"/>
<circle cx="205" cy="228" r="47" fill="#fad948" stroke="#0e0e8a"  stroke-width="2px"/>
<circle cx="131" cy="211" r="47" fill="#fa48e8" stroke="#0e0e8a"  stroke-width="2.5px"/>
<circle cx="94" cy="154" r="63" fill="#b2e075" stroke="#0e0e8a"  stroke-width="3px"/>

<circle cx="65" cy="140" r="8" fill="#000" stroke="#0e0e8a"  stroke-width="3.5px"/>
<circle cx="108" cy="155" r="8" fill="#000" stroke="#0e0e8a"  stroke-width="4px"/>

<circle cx="83" cy="176" r="11" fill="#black" stroke="#0e0e8a"  stroke-width="4px"/>

<circle cx="167" cy="67" r="13" fill="#668c32" stroke="#668c32"  stroke-width="1px"/>
<circle cx="39" cy="55" r="13" fill="#668c32" stroke="#668c32" stroke-width="1px"/>

<circle cx="423" cy="258" r="9" fill="#4f692d" stroke="#0e0e8a"  stroke-width="2px"/>
<circle cx="363" cy="295" r="9" fill="#4f692d" stroke="#0e0e8a"  stroke-width="2px"/>
<circle cx="321" cy="288" r="9" fill="#4f692d" stroke="#0e0e8a"  stroke-width="2px"/>
<circle cx="277" cy="305" r="9" fill="#4f692d" stroke="#0e0e8a"  stroke-width="2px"/>
<circle cx="242" cy="291" r="9" fill="#4f692d" stroke="#0e0e8a"  stroke-width="2px"/>
<circle cx="194" cy="310" r="9" fill="#4f692d" stroke="#0e0e8a"  stroke-width="2px"/>
<circle cx="156" cy="285" r="9" fill="#4f692d" stroke="#0e0e8a"  stroke-width="2px"/>
<circle cx="101" cy="287" r="9" fill="#4f692d" stroke="#0e0e8a"  stroke-width="2px"/>
<circle cx="75" cy="251" r="9" fill="#4f692d" stroke="#0e0e8a"  stroke-width="2px"/>

<line x1="69" y1="97"   x2="42" y2="63" stroke-width="3" stroke="#668c32" />
<line x1="125" y1="102" x2="156" y2="71" stroke-width="3" stroke="#668c32" />


<line x1="92" y1="237"  x2="82" y2="248" stroke-width="4" stroke="black" />
<line x1="117" y1="254" x2="107" y2="281" stroke-width="4" stroke="black" />
<line x1="176" y1="261" x2="160" y2="278" stroke-width="4" stroke="black" />
<line x1="205" y1="271" x2="199" y2="304" stroke-width="4" stroke="black" />
<line x1="261" y1="272" x2="248" y2="285" stroke-width="4" stroke="black" />
<line x1="277" y1="274" x2="281" y2="299" stroke-width="4" stroke="black" />
<line x1="330" y1="265" x2="324" y2="280" stroke-width="4" stroke="black" />
<line x1="361" y1="263" x2="363" y2="286" stroke-width="4" stroke="black" />
<line x1="415" y1="223" x2="424" y2="249" stroke-width="4" stroke="black" />

<circle cx="65" cy="137" r="4" fill="#fff" stroke="#000"  stroke-width="1px"/>
<circle cx="108" cy="151" r="4" fill="#fff" stroke="#000"  stroke-width="1px"/>


</svg>

Resultado:

Te recomendamos leer:  Estructura de una pagina HTML5

Podríamos haber creado un gusanito auténtico, incluso empleando otros elementos HTML5, pero esta lección esta dedicada a los círculos y eso es lo que aplicamos, sin embargo hemos agregado elementos línea <line/> para darle forma, además de que ya lo conocimos en anteriores lecciones.

Por último, cabe señalar que los elementos se van poniendo unos sobre otro de acuerdo al orden en que van apareciendo en el código HTML, obviamente esto se puede controlar, pero ello ya corresponde al curso de CSS, por ahora lo dejemos aquí.

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