Elemento de elipse SVG

El elemento SVG <elipse> se utiliza para crear una elipse. La diferencia entre círculo y elipse es que una elipse tiene un radio x y ay que difieren entre sí, mientras que un círculo tiene el mismo radio x e y:

Sintaxis:

<ellipse
   cx="x-axis co-ordinate"
   cy="y-axis co-ordinate"
   
   rx="length" 
   ry="length" >    
</ellipse>

Atributos:

  • cx: coordenada en el eje x del centro.
  • cy: coordenada del eje y del centro.
  • rx: radio del eje x de la elipse.
  • ry: radio del eje y de la elipse.

Ejemplo:

<html>
   <title>SVG Ellipse</title>
   <body>
      <svg width="400" height="400">
            <ellipse cx="100" cy="100" rx="90" ry="50" 
            stroke="black" stroke-width="2" fill="grey">
                  
            </ellipse>
      </svg>
     
   </body>
</html>

Producción:

Ejemplo: Cambiar la opacidad.

<html>
   <title>SVG Ellipse</title>
   <body>
      <svg width="400" height="400">
            <ellipse cx="100" cy="100" rx="90" ry="50" 
            stroke="black" stroke-width="2" fill="grey"
            opacity="0.5">
                  
            </ellipse>
      </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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *