Dibujar un círculo en SVG Diciembre 26, 2007
Publicado por lineadecodigo en : SVG , trackbackPara 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>
Visualizar el ejemplo | Descargar el código
Articulos Similares:
- Círculos con borde en SVG
- Dibujar un rectángulo con SVG
- Mi primer gráfico SVG
- Dibujar una elipse en SVG
- Circulo con gradiente lineal
Enviar entrada por email
| 
Imprimir
| 5902 visitas
(Todavia sin evaluar)
Loading ...
Comentarios»
[...] Dibujar un círculo en SVG [...]
[...] 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 [...]