En este artículo, aprenderá sobre la forma básica de SVG como el círculo, que se encuentra entre las diferentes formas de SVG como <rect >, <line> , <elipse> , <polygon> , etc. Para que pueda dibujar círculos fácilmente usando <circle> etiqueta cuya etiqueta principal es una etiqueta SVG en HTML.
Básicamente, el elemento <circle> dibuja un círculo en la pantalla que se realiza mediante los 3 parámetros básicos que incluyen cx, cy y r , que se muestran brevemente en este artículo.
Sintaxis:
<circle cx="x-axis co-ordinate" cy="y-axis co-ordinate" r="length" > </circle>
Atributos:
- cx: coordenada en el eje x del centro del círculo. El valor predeterminado es 0.
- cy: coordenada en el eje y del centro del círculo. El valor predeterminado es 0.
- r: Radio del círculo.
Nota: cx y cy son las coordenadas del eje x y del eje y que determinan la posición del círculo y r es el radio del círculo que determina el tamaño del círculo. La representación circular se desactivará si su radio es cero.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green">Welcome To GeeksforGeeks</h1> <svg height="400" width="400"> <circle cx="150" cy="150" r="100" stroke="gray" stroke-width="2" fill="green" /> </svg> <svg height="300" width="300"> <circle cx="150" cy="150" r="100" stroke="green" stroke-width="2" fill="blue" /> </svg> </center> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <center> <h1 style="color:green">Welcome To GeeksforGeeks</h1> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-green circle is towards 80px +ve x-axis with 64px radius-> <circle cx="80" cy="80" r="64" stroke="gray" stroke-width="2" fill="green" fill-opacity="90%" /> <!-red circle is towards 170px +ve x-axis with 64px radius-> <circle cx="170" cy="80" r="64" stroke="black" stroke-width="2" fill="red" fill-opacity="70%" /> </svg> </center> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA