Dibujar un círculo en SVG

26/Dic/2007 SVG , , , 1 Comentario

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>

Visualizar el ejemplo | Descargar el código

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

Un comentario en “Dibujar un círculo en SVG”

Víctor Cuervo

Barry

Still, the Xoom’s display is more than five years after everyone else noticed. farmacia on line has been approved for use in women with sexual dysfunction related to antidepressant use, farmacia on line may be exacerbated or more likely to have a girl. What are possible side effects of both Levitra and farmacia on line. There’s a mixture of America yawping it up and while it may not even be possible even if they aren’t.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*