SVG x Atributo – Barcelona Geeks

El atributo x define una coordenada del eje x en el sistema de coordenadas del usuario.

Sintaxis:

x = "x-coordinate"

Valores de atributos:

length: Longitud en la que queremos establecer el eje x.
porcentaje: Porcentaje en el que queremos fijar el eje x.

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

Ejemplo 1: Elemento rectangular con el eje x diferente.

<!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 2: Elemento rectangular con el mismo eje x.

<!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 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