Desenhar Círculo com SVG <circle>

<circle> O elemento SVG é uma forma básica do SVG, usado para criar círculos, com base em um centro e um raio, e pode usar stroke e fill propriedades para desenhar contornos de linha reta, traços de linha e preenchimento de cor circular.

SVG <circle> elemento é usado para desenhar círculos. Este é um exemplo simples:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle　cx="40"　cy="40"　r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>

Esta é a imagem do resultado da execução

Este círculo tem o ponto cx, cy como centro e o raio r. cx, cy e r são atributos do elemento <circle>.

Contorno circular

Você pode usar a propriedade stroke estilo SVG para definir o contorno (contorno) do círculo SVG. No primeiro exemplo desta página, o traço é definido como #006600 verde escuro. Mas, além de definir a cor da caneta, você pode definir mais. Você também pode usar stroke-widthstyle propriedade define a largura da caneta. Este é um exemplo:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　fill: #00cc00"/></svg>

A aparência do círculo após a execução é a seguinte:

Você também pode usar stroke-A propriedade dasharray desenha a borda com traços. Este é um exemplo:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke:#006600;
　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　fill: #00cc00"/></svg>

A aparência renderizada é a seguinte:

Você também pode remover a borda (contorno) do círculo e preenchê-lo apenas com a cor de preenchimento. O código de exemplo é o seguinte:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke: #"
　　　　　　　　　　　fill: #00cc00"/></svg>

O efeito do círculo sem borda após a execução é como follows:

Preenchimento de Círculo

A propriedade de estilo fill controla o preenchimento do círculo. Ao definir a propriedade fill como none, você pode escolher não preencher.
Exemplo a seguir:

A aparência do círculo sem preenchimento é a seguinte:

Você pode usar a propriedade fill para definir a cor de preenchimento, como mencionado anteriormente neste artigo, o código de exemplo é o seguinte:

<svg　height="80px"><circle cx="40"　cy="40"　r="24"
　　　　style="stroke: #"660066;
　　　　　　　　　　　fill: #00ff00"/></svg>

A aparência de preenchimento e cor de desenho do círculo é como follows:

Você também pode usar fill-O estilo de opacidade define a cor de preenchimento como transparente. O exemplo a seguir desenha dois círculos, um deles localizado parcialmente sobre o outro, e é semi-transparente.

<svg　height="80px">
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:　#660000;
　　　　　　　　　　　　　　　　　　　fill:　#cc0000;
　　　　　　　　　　　　></circle>
　　　　<circle　cx="64"　cy="40"　r="24"　style="stroke:　#000099;
　　　　　　　　　　　　　　　　　　　fill:　#0000cc;
　　　　　　　　　　　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　　　　　></circle>
</svg>

O efeito de execução é o seguinte:

Observe que o círculo azul (à direita) está agora semi-transparente no interior. Para que a linha também seja semi-transparente, é necessário usar stroke-Propriedade opacitystyle.