Círculos con borde en SVG

Lo primero que tendremos que hacer será dibujar un circulo. Para ello utilizamos la etiqueta . Es bastante interesante que le eches un vistazo al ejemplo Dibujar un círculo en SVG para poder acometer la tarea.

Una vez tengamos nuestro circulo, simplemente tendremos que “abusar” de dos atributos:

stroke: indica el color del borde.
stroke-width: indica el ancho del borde.

Al final tendremos el siguiente código:

<circle
  cx="100"
  cy="100"
  r="50"
  stroke="blue"
  stroke-width="10"
  style="fill:cyan;"
/>

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Círculos con borde en SVG

Se explica cómo dibujar círculos con borde en SVG usando los atributos stroke y stroke-width.

Descargar código