Referencia completa de la propiedad SVG

SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML. Es un tipo de gráfico vectorial que se puede ampliar o reducir. Las propiedades se usan para pasar el valor al elemento, hay muchas propiedades que se pueden usar en los elementos SVG.

Lista de propiedades SVG:

El siguiente ejemplo le dará una breve idea de cómo usar la propiedad SVG:

Ejemplo: En este ejemplo, veremos dos diagramas, uno será una elipse y otro será un círculo.

HTML

<!DOCTYPE html>
<html>
<body>
   <center>
      <h1 style="text-align: center;
                 color:green;">
         GeeksforGeeks
      </h1>
         <b> SVG Property </b>
      <div style="width: 600px;">
      <div style="float: left; ">
         <svg width="200" 
             height="200" 
             xmlns="http://www.w3.org/2000/svg">
            <ellipse cx="100" 
                     cy="100"
                     rx="100"
                     ry="60"
                     id="ellipse"
               onclick="outputSize();"/>
         </svg>
      </div>
        
      <div style="float: right;">
         <svg xmlns="http://www.w3.org/2000/svg" 
              viewBox="0 0 250 250"
              width="250"
              height="250">
            <circle cx="150" 
                    cy="100" 
                    r="50"
                    fill="green" 
                    id="gfg" 
                    onclick="clickCircle();"/>
         </svg>
      </div>
      </div>
   </center>
</body>
</html>

Producción:

Propiedad SVG

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta