Círculo SVG
Nesta página, você encontra informações sobre o elemento SVG <circle>, aprende a criar um círculo com ele e vê exemplos com alguns atributos.
Descrição do elemento <circle>
O elemento SVG <circle> desenha um círculo a partir de um ponto central e um raio. As coordenadas do centro do círculo são definidas com os atributos cx e cy, e o raio é definido com o atributo r.
É uma das formas básicas SVG, ao lado dos elementos <ellipse>, <rect> e <line>. Use <circle> sempre que precisar de uma forma perfeitamente redonda que escala sem perder qualidade, pois SVG é baseado em vetores.
Exemplo do 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 explicar o código acima:
- Os atributos
cxecyespecificam as coordenadas x e y do centro do círculo. - O atributo
respecifica o raio do círculo. - Os atributos
strokeestroke-widthdesenham um contorno cinza de 5px, efillpinta o interior de roxo.
O problema padrão de cx/cy: se você omitir cx e cy, ambos assumem o valor padrão 0, colocando o centro no canto superior esquerdo do canvas SVG. Apenas o quarto inferior direito do círculo permanece visível — o restante é cortado fora do viewport. Sempre defina cx e cy com pelo menos o valor de r para que o círculo inteiro caiba dentro do SVG.
Técnicas Avançadas de Círculo SVG
Embora os círculos SVG básicos sejam ótimos, existem muitas técnicas avançadas que você pode usar para destacar seus círculos SVG. Aqui estão alguns exemplos:
Gradientes
Os círculos SVG podem usar gradientes para criar uma transição suave entre cores. Aqui está um exemplo:
<!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>Neste exemplo, criamos um gradiente que vai do amarelo ao vermelho. Em seguida, usamos o atributo fill para aplicar o gradiente ao nosso círculo.
Sombras
Os círculos SVG também podem ter sombras para criar profundidade e dimensão. O filtro deve ser definido dentro de um bloco <defs> (ou pelo menos antes do elemento que o referencia) para que o navegador possa resolver a referência url(#shadow). Aqui está um exemplo:
<!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>Aqui definimos o filtro de sombra em <defs> e o aplicamos ao círculo com filter="url(#shadow)". A primitiva feDropShadow faz o trabalho: dx e dy deslocam a sombra, stdDeviation controla a quantidade de desfoque, e flood-color define a cor da sombra. Os atributos x, y, width e height do filtro ampliam a região do filtro para 140% para que a sombra deslocada e desfocada não seja cortada nas bordas da caixa de filtro padrão.
Animações
Por fim, os círculos SVG também podem ser animados para criar experiências interativas para seus usuários. Aqui está um exemplo:
<!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>Neste exemplo, criamos um círculo verde que se move quando clicado. Usamos o elemento <animate> para definir a animação e apontamos a propriedade a ser alterada com o atributo attributeName.
Nota:
<animate>faz parte do SMIL, cujo suporte nos navegadores é inconsistente e já foi descontinuado em alguns mecanismos no passado. Para trabalho em produção, animações CSS ou JavaScript (por exemplo, a Web Animations API) são geralmente uma escolha mais confiável.
Atributos
O elemento SVG <circle> também suporta os Atributos Globais e os Atributos de Evento.
| Atributo | Descrição |
|---|---|
| cx | A coordenada no eixo x do centro do círculo. O padrão é 0. |
| cy | A coordenada no eixo y do centro do círculo. O padrão é 0. |
| r | O raio do círculo. Um valor menor ou igual a zero desativa a renderização do círculo. |
| stroke | A cor do contorno do círculo. |
| stroke-width | A largura do contorno do círculo, em unidades do usuário. |
| fill | A cor usada para pintar o interior do círculo. |
| pathLength | Especifica o comprimento total do caminho, em unidades do usuário (os nomes dos atributos SVG diferenciam maiúsculas de minúsculas). |
Os círculos também aceitam os atributos de apresentação SVG comuns: fill-opacity e stroke-opacity controlam a transparência do preenchimento e do contorno, e stroke-dasharray transforma um contorno sólido em tracejado (por exemplo, stroke-dasharray="10 5").
O elemento <circle> está intimamente relacionado com as outras formas básicas SVG. Veja SVG <ellipse> para ovais com dois raios independentes, e SVG <rect> para retângulos e retângulos com cantos arredondados.