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.
Ver índice del contenido
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 círculo 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:
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 sólido 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 tú mismo y trata de hacerlo sin ver el código. Cuando tengas dificultades, pues entonces revisas el código.
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:
Podríamos haber creado un gusanito auténtico, incluso empleando otros elementos HTML5, pero esta lección está 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í.
[popup_anything id=»4434″]