Círculos svg en html5

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:  TEXTO SVG 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:  Introducción a curso HTML5

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:  Rectángulos en svg 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
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

Es posible que te falte desarrollar las lecciones de HTML.

Curso HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML

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

Es posible que te falte desarrollar las lecciones de HTML.

Curso HTML

1.- Introducción a HTML
2.- Qué es HTML
3.- Estructura básica de un documento HTML
4.- Etiquetas HTML tipos y ejemplos
5.- Atributos en HTML
6.- Etiquetas para texto HTML y formatos HTML
7.- Cómo poner hipervínculos o enlaces en HTML
8.- Cómo insertar una imagen en HTML
9.- Listas en HTML – Cómo crear y poner viñetas
10.- Cómo hacer tablas en HTML
11.- Formularios en HTML – Cómo crear y personalizar
12.- Etiqueta div y span en HTML
13.- Atributo id y class en HTML
14.- Elementos Inline y Block en HTML
15.- Maquetación web en HTML