jump to navigation

Dibujar un círculo en SVG Diciembre 26, 2007

Publicado por lineadecodigo en : SVG , trackback

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:

<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

| Print This Post/Page | 1486 visitas

 Votes | Average: 0 out of 5 Votes | Average: 0 out of 5 Votes | Average: 0 out of 5 Votes | Average: 0 out of 5 Votes | Average: 0 out of 5 (Todavia sin evaluar)
Loading ... Loading ...

Comentarios»

1. Linea de Codigo » Círculos con borde en SVG - Diciembre 28, 2007

[…] Dibujar un círculo en SVG […]

2. Linea de Codigo » Transparencia y Opacidad 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 […]


Close
E-mail It