SVG y Atributo – Barcelona Geeks

El atributo y define la coordenada del eje y en el sistema de coordenadas del usuario.

Sintaxis:

y = "y-coordinate"

Valores de atributos:

longitud: longitud en la que queremos establecer el eje x.
porcentaje: porcentaje en el que queremos establecer el eje x.

Usaremos el atributo y para establecer la coordenada y para los elementos.

Ejemplo 1: Grupo de elementos rectangulares con diferente eje y.

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg width="200" height="200" 
            viewBox="0 0 300 300"> 
        <rect x="20"  y="20" width="60" 
            height="60" fill="green"/>
        <rect x="20" y="120" width="60" 
            height="60" fill="green"/>
        <rect x="20" y="120" width="60" 
            height="60" fill="green"/> 
    </svg> 
</body> 
  
</html>

Producción:

Ejemplo 2: Un grupo de elementos rectangulares con el mismo eje y.

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg width="200" height="200" 
            viewBox="0 0 300 300"> 
        <rect x="20"  y="20" width="60" 
            height="60" fill="green"/>
        <rect x="120" y="20" width="60" 
            height="60" fill="green"/>
        <rect x="220" y="20" width="60" 
            height="60" fill="green"/> 
    </svg> 
</body> 
  
</html>

Producción:

Ejemplo 3: Usar valor porcentual.

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg width="200" height="200" 
            viewBox="0 0 300 300"> 
        <rect x="30%"  y="30%" width="60" 
            height="60" fill="green"/>
    </svg> 
</body> 
  
</html>

Producción:

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta