Círculo SVG
En esta página encontrarás información sobre el elemento de forma SVG <circle>, aprenderás a crear un círculo con él y verás ejemplos con algunos atributos.
Descripción del elemento <circle>
El elemento SVG <circle> dibuja un círculo a partir de un punto central y un radio. Las coordenadas del centro del círculo se establecen con los atributos cx y cy, y el radio se establece con el atributo r.
Es una de las formas básicas de SVG, junto con los elementos <ellipse>, <rect> y <line>. Utiliza <circle> siempre que necesites una forma perfectamente redonda que escale sin perder calidad, ya que SVG está basado en vectores.
Ejemplo del elemento SVG <circle>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="300" width="300">
<circle cx="150" cy="150" r="100" stroke="grey" stroke-width="5" fill="purple" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Vamos a explicar el código anterior:
- Los atributos
cxycyespecifican las coordenadas x e y del centro del círculo. - El atributo
respecifica el radio del círculo. - Los atributos
strokeystroke-widthdibujan un contorno gris de 5px, yfillpinta el interior de color púrpura.
El problema predeterminado de cx/cy: si omites cx y cy, ambos tienen por defecto el valor 0, lo que coloca el centro en la esquina superior izquierda del lienzo SVG. Solo el cuarto inferior derecho del círculo quedará visible — el resto queda recortado fuera del viewport. Siempre establece cx y cy en al menos r para que el círculo completo encaje dentro del SVG.
Técnicas Avanzadas de Círculos SVG
Aunque los círculos SVG básicos son excelentes, existen muchas técnicas avanzadas que puedes usar para hacer que tus círculos SVG destaquen. Aquí hay algunos ejemplos:
Degradados
Los círculos SVG pueden usar degradados para crear una transición suave entre colores. Aquí tienes un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#grad1)" />
</svg>
</body>
</html>En este ejemplo, hemos creado un degradado que va de amarillo a rojo. Luego usamos el atributo fill para aplicar el degradado a nuestro círculo.
Sombras
Los círculos SVG también pueden tener sombras para crear profundidad y dimensión. El filtro debe definirse dentro de un bloque <defs> (o al menos antes del elemento que lo referencia) para que el navegador pueda resolver la referencia url(#shadow). Aquí tienes un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="120" height="120">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black" />
</filter>
</defs>
<circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
</svg>
</body>
</html>Aquí definimos el filtro de sombra en <defs> y luego lo aplicamos al círculo con filter="url(#shadow)". El primitivo feDropShadow hace el trabajo: dx y dy desplazan la sombra, stdDeviation controla la cantidad de desenfoque, y flood-color establece el color de la sombra. Los atributos x, y, width y height del filtro amplían la región del filtro al 140% para que la sombra desplazada y desenfocada no quede recortada en los bordes del cuadro del filtro predeterminado.
Animaciones
Por último, los círculos SVG también pueden animarse para crear experiencias interactivas para los usuarios. Aquí tienes un ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<circle id="myCircle" cx="50" cy="50" r="40" fill="green">
<animate attributeName="cx" from="50" to="200" dur="1s" begin="click" />
</circle>
</svg>
</body>
</html>En este ejemplo, hemos creado un círculo verde que se mueve al hacer clic. Usamos el elemento <animate> para definir la animación y apuntar a la propiedad que queremos cambiar con el atributo attributeName.
Nota:
<animate>es parte de SMIL, cuyo soporte en navegadores es irregular y ha sido declarado obsoleto en el pasado en algunos motores. Para trabajo en producción, las animaciones CSS o JavaScript (por ejemplo, la Web Animations API) suelen ser una opción más confiable.
Atributos
El elemento SVG <circle> también admite los Atributos Globales y los Atributos de Evento.
| Atributo | Descripción |
|---|---|
| cx | La coordenada del eje x del centro del círculo. Por defecto es 0. |
| cy | La coordenada del eje y del centro del círculo. Por defecto es 0. |
| r | El radio del círculo. Un valor menor o igual a cero deshabilita el renderizado del círculo. |
| stroke | El color del contorno del círculo. |
| stroke-width | El ancho del contorno del círculo, en unidades de usuario. |
| fill | El color utilizado para pintar el interior del círculo. |
| pathLength | Especifica la longitud total del trazado, en unidades de usuario (los nombres de atributos SVG distinguen entre mayúsculas y minúsculas). |
Los círculos también aceptan los atributos de presentación SVG comunes: fill-opacity y stroke-opacity controlan la transparencia del relleno y el contorno, y stroke-dasharray convierte un contorno sólido en uno discontinuo (por ejemplo stroke-dasharray="10 5").
El elemento <circle> está estrechamente relacionado con las otras formas básicas de SVG. Consulta SVG <ellipse> para óvalos con dos radios independientes, y SVG <rect> para rectángulos y rectángulos con esquinas redondeadas.