Para completar esta sencilla tarea nos valdremos de la etiqueta SVG <CIRCLE/>. Vamos, que para pintar un circulo en SVG no nos tenemos que comer mucho la cabeza.
Y aprendernos una propiedad que es el atributo r. El cual viene a indicarnos el radio que va a tener el circulo.
<CIRCLE r=10/>
Otras tres propiedades que nos vendrán bien serán:
- cx: coordenada X de la posición del circulo.
- cy: coordenada Y de la posición del círculo.
- fill: nos permitirá darle un color a nuestro circulo.
<CIRCLE cx="100" cy="100" fill="green"/>
O, para los más puristas, utilizaremos el style para darle el color al circulo:
<CIRCLE cx="100" cy="100" style="fill:green;"/>
Y recuerda que para poner el circulo necesitamos de un lienzo. Y, este, su tamaño y color lo delimita la propia etiqueta SVG.
<SVG width="300" height="300"> ... </SVG>
