Atributo SVG x1

El atributo x1 se usa para especificar la primera coordenada x para dibujar un elemento SVG que requiere más de una coordenada.

Elementos que utilizan este atributo:

Sintaxis:

x1 = "x1-coordinate"

Valores de atributos:

  • length: Longitud en la que queremos establecer la coordenada x1.
  • porcentaje: Porcentaje en el que queremos establecer la coordenada x1.

Usaremos el atributo x1 para establecer la coordenada x1.

Ejemplo 1: En este ejemplo, usaremos el valor de longitud.

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 70 70" 
        xmlns="http://www.w3.org/2000/svg">
          
        <line x1="2" x2="7" y1="1" 
            y2="9" stroke="green" />
          
        <line x1="6" x2="7" y1="1" 
            y2="9" stroke="green" />
          
        <line x1="10" x2="7" y1="1" 
            y2="9" stroke="green" />
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2: En este ejemplo, usaremos el valor porcentual. 

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 70 70" 
        xmlns="http://www.w3.org/2000/svg">
          
        <line x1="14%" x2="21%" y1="1" 
                y2="9" stroke="green" />
          
        <line x1="21%" x2="21%" y1="1" 
                y2="9" stroke="green" />
          
        <line x1="28%" x2="21%" y1="1" 
                y2="9" stroke="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

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