Crear un círculo en SVG con HTML5, es más fácil de lo que piensas, solamente tenemos que definir la posición del centro de dicho círculo y el radio que deseamos, 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 dentro de la etiqueta SVG, de la siguiente manera:
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 .
- 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:
Te invito a provar diferentes alternativas de acuerdo al código dado, utilizando la creatividad o simplemente probando.
El tercer ejemplo crea una figura de gusanito infantil, veamos el código para crealo.
<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:
Podemos crear infinidad de cosas de esta forma. Te invito a que lo modifiques todo lo que puedas o te animes a probar de crear otras formas utilizando círculos.
Por último, presta atención que los elementos se van poniendo unos sobre otro de acuerdo al orden en que van apareciendo en el código HTML.