Dibujar círculos con SVG <circle>

<circle> El elemento SVG es una forma básica de SVG, utilizado para crear círculos, basado en un centro y un radio, y también puede utilizar trazos y rellenos de color para círculos en línea, punteada y de color.

SVG <circle> elemento se utiliza para dibujar círculos. Este es un ejemplo simple:

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

Esta es la imagen del resultado de ejecutar

El círculo tiene como centro de coordenadas el punto cx, cy y como radio r. cx, cy y r son propiedades del elemento <circle>.

Borde del círculo

Puedes usar la propiedad stroke del estilo SVG para establecer el trazo (contorno) del círculo SVG. En el primer ejemplo de esta página, las trazas están configuradas en #006600 verde oscuro. Pero, no solo puedes establecer el color del trazo, también puedes establecer más. También puedes usar stroke-El atributo widthstyle establece el ancho del trazo. Este es un ejemplo:

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

La apariencia del círculo después de ejecutar es la siguiente:

También puedes usar stroke-El atributo dasharray dibuja el borde con línea punteada. Este es un ejemplo:

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

La apariencia después de renderizar es la siguiente:

También puedes eliminar el borde (contorno) del círculo y rellenarlo solo con el color de relleno. El código de ejemplo es el siguiente:

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

El efecto después de ejecutar el círculo sin borde es el siguiente:

Relleno de círculo

El atributo de estilo fill controla la forma de rellenar el círculo. Al establecer la propiedad fill en none, se puede elegir no rellenar completamente.
El ejemplo es el siguiente:

La apariencia del círculo sin relleno es la siguiente:

Puedes usar la propiedad fill para establecer el color de relleno, como se explicó anteriormente en este documento, el código de ejemplo es el siguiente:

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

La apariencia de dibujar un círculo y rellenar el color es como sigue:

También puedes usar fill-El atributo de estilo de opacidad establece el relleno en transparencia. El siguiente ejemplo dibuja dos círculos, uno de los cuales está parcialmente ubicado sobre el otro y es semitransparente.

<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>

El efecto de ejecución es el siguiente:

Por favor, tenga en cuenta que el círculo azul (derecha) está ahora semi-transparente en el interior. Para que la traza también sea semi-transparente, debe usar stroke-Atributo de opacidadstyle.