Círculo SVG
Descripción del elemento <circle>
El elemento SVG <circle> crea círculos basados en un punto central y un radio. Las coordenadas del centro del círculo se especifican mediante los atributos cx y cy. Y el radio del círculo se especifica mediante el atributo r.
Ejemplo del elemento SVG <circle>:
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>Explicación del código anterior:
- Los atributos cx y cy especifican las coordenadas x e y del centro del círculo. En los casos en que se omiten los atributos cx y cy, el centro del círculo se establece en (0,0).
- El atributo r se utiliza para especificar el radio del círculo.
Técnicas avanzadas para círculos SVG
Aunque los círculos SVG básicos son excelentes, existen muchas técnicas avanzadas que puedes utilizar para destacar tus círculos SVG. Aquí tienes algunos ejemplos:
Degradados
Los círculos SVG pueden utilizar degradados para crear una transición suave entre colores. Aquí tienes un ejemplo:
Los círculos SVG pueden utilizar degradados para crear una transición suave entre colores
<!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 del amarillo al rojo. Luego utilizamos 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. Aquí tienes un ejemplo:
Los círculos SVG también pueden tener sombras para crear profundidad y dimensión.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
<filter id="shadow">
<feDropShadow dx="2" dy="2" stdDeviation="2" />
</filter>
</svg>
</body>
</html>En este ejemplo, hemos creado un círculo azul con una sombra. Utilizamos el atributo filter para aplicar el efecto de sombra, que se define en el elemento filter.
Animaciones
Por último, los círculos SVG también pueden animarse para crear experiencias interactivas para tus usuarios. Aquí tienes un ejemplo:
Los círculos SVG también pueden animarse para crear experiencias interactivas
<!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. Utilizamos el elemento animate para definir la animación y lo adjuntamos al elemento circle mediante el atributo attributeName.
Atributos
El elemento SVG <circle> también admite los Atributos globales y los Atributos de eventos.
| Atributo | Descripción |
|---|---|
| cx | La coordenada en el eje x del centro del círculo. |
| cy | La coordenada en el eje y del centro del círculo. |
| r | El radio del círculo. Un valor menor o igual a cero deshabilitará la representación del círculo. |
| pathlength | Este atributo especifica la longitud total del recorrido, en unidades de usuario. |
Práctica
¿Cuáles de los siguientes atributos son necesarios para crear un elemento de círculo SVG en HTML?