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: