Línea SVG
Descripción del elemento <line>
El elemento SVG <line> crea líneas rectas. Dado que los elementos <line> son geométricamente unidimensionales, no tienen área interior y nunca se rellenan. El atributo fill se ignora para este elemento.
Ejemplo del elemento SVG <line>:
Ejemplo del elemento SVG <line>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="310" width="400">
<line x1="50" y1="30" x2="300" y2="300" style="stroke:rgb(8, 112, 177);stroke-width:3" />
</svg>
</body>
</html>Explicación del código anterior:
- El atributo
x1especifica la coordenada x de inicio. - El atributo
y1especifica la coordenada y de inicio. - El atributo
x2especifica la coordenada x de finalización. - El atributo
y2especifica la coordenada y de finalización.
Por defecto, las líneas se dibujan con un trazo negro y un ancho de trazo de 1 píxel. Puedes personalizarlos utilizando los atributos stroke y stroke-width, como se muestra en el ejemplo.
Elemento SVG <line> frente a SVG <path>
Los elementos SVG <line> y <path> dibujan líneas, pero cumplen propósitos diferentes. El elemento <line> está diseñado específicamente para líneas rectas simples y es más semántico y eficiente para esta tarea. El elemento <path> se utiliza para definir formas complejas o múltiples líneas y curvas conectadas. Aunque <path> puede dibujar líneas rectas, generalmente es mejor usar <line> para segmentos rectos básicos y reservar <path> para dibujos más complejos.
El elemento SVG <line> también admite los Atributos globales y los Atributos de eventos.
Práctica
¿Cuáles son los atributos SVG requeridos para crear una línea en HTML?