Elemento de círculo SVG – Barcelona Geeks

El elemento SVG <circle> se usa para dibujar un círculo. Se dan el punto central y el radio.

Sintaxis:

<circle
   cx="x-axis co-ordinate"
   cy="y-axis co-ordinate"
   r="length" >   
</circle>

Atributos:

cx: coordenada en el eje x del centro.
cy: coordenada del eje y del centro
r: Radio del círculo.

Ejemplo:

html

<!DOCTYPE html>
<html>
    <body>
        <svg width="200" height="200">
            <circle cx="80" cy="80" r="50" 
                    stroke="black" 
                    stroke-width="2" 
                    fill="grey" />
        </svg>
    </body>
</html>

Producción:

Ejemplo: Cambiar la opacidad

html

<!DOCTYPE html>
<html>
    <body>
        <svg width="200" height="200">
            <circle cx="80" cy="80"
                    r="50" stroke="black" 
                    stroke-width="2" 
                    fill="grey"
                    opacity="0.5" />
        </svg>
    </body>
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

html

html

Deja una respuesta Cancelar la respuesta