SVG » Dibujar un círculo en SVG
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>
Artículos relacionados:
Diciembre 28, 2007 #
[...] Dibujar un círculo en SVG [...]
Enero 15, 2008 #
[...] primero es recordar cómo se define un circulo. Para ello, es recomendable la lectura del ejemplo Dibujar un Circulo en SVG. Pero, básicamente, consiste en utilizar la etiqueta <CIRCLE/> con más o menos [...]