W3docs
es
Iniciar sesión

Línea SVG

Aprende el elemento SVG <line>: dibuja una línea recta con x1/y1/x2/y2, aplica estilos con stroke, añade guiones y flechas, y compáralo con <path>.

Descripción del elemento <line>

El elemento SVG <line> dibuja una línea recta entre dos puntos: un punto de inicio (x1, y1) y un punto final (x2, y2). Úsalo cuando necesites una regla, un eje, un conector o un divisor básico dentro de un <svg> — es la forma más sencilla y legible de expresar "una línea de A a B".

Los cuatro atributos de coordenadas tienen como valor predeterminado 0 y aceptan tanto longitudes (unidades de usuario, como 30 o 30px) como porcentajes relativos al viewport (como 50%). Por tanto, un <line> sin atributos es una línea de longitud cero en el origen, que no renderiza nada.

Dado que un <line> es geométricamente unidimensional, no tiene área interior. SVG rellena el interior de una forma con el pincel fill y pinta su contorno con el pincel stroke — y una línea no tiene interior. Por esa razón, el atributo fill se ignora, y una línea es invisible hasta que se le asigna un stroke.

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>
Pruébalo tú mismo »

Expliquemos el código anterior:

  • El atributo x1 especifica la coordenada x de inicio.
  • El atributo y1 especifica la coordenada y de inicio.
  • El atributo x2 especifica la coordenada x final.
  • El atributo y2 especifica la coordenada y final.

Por defecto, las líneas se dibujan con un trazo negro y un ancho de trazo de 1 píxel. Puedes personalizarlos usando los atributos stroke y stroke-width, como se muestra en el ejemplo.

Estilizar líneas: guiones, extremos y flechas

La apariencia de una línea está controlada completamente por las propiedades relacionadas con el trazo. El ejemplo siguiente dibuja tres líneas con diferentes tratamientos:

  • stroke-dasharray convierte una línea sólida en una línea discontinua o punteada. El valor es una lista de longitudes de guiones y huecos (8 4 significa un guión de 8 unidades seguido de un hueco de 4 unidades, de forma repetida).
  • stroke-linecap da forma a los extremos de la línea — butt (el valor predeterminado, plano), round o square.
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="160" width="320">
      <!-- Solid line -->
      <line x1="20" y1="30" x2="300" y2="30"
            stroke="rgb(8, 112, 177)" stroke-width="4" />
      <!-- Dashed line -->
      <line x1="20" y1="80" x2="300" y2="80"
            stroke="rgb(8, 112, 177)" stroke-width="4"
            stroke-dasharray="12 6" />
      <!-- Rounded dotted line -->
      <line x1="20" y1="130" x2="300" y2="130"
            stroke="rgb(8, 112, 177)" stroke-width="8"
            stroke-linecap="round" stroke-dasharray="0.1 20" />
    </svg>
  </body>
</html>

Otras dos propiedades son útiles con las líneas:

  • marker-end adjunta un <marker> reutilizable (definido en <defs>) al final de la línea — la forma estándar de añadir una punta de flecha.
  • vector-effect="non-scaling-stroke" mantiene el ancho del trazo constante incluso cuando el SVG se escala, de modo que una línea fina sigue siendo fina independientemente del zoom.

SVG <line> vs SVG <path>

Los elementos SVG <line> y <path> dibujan líneas, pero sirven para propósitos distintos. El elemento <line> está diseñado específicamente para líneas rectas simples y resulta más semántico y eficiente para esta tarea. El elemento <path> se usa para definir formas complejas o múltiples líneas y curvas conectadas. Aunque <path> puede dibujar líneas rectas, por lo general es mejor usar <line> para segmentos rectos básicos y reservar <path> para dibujos más complejos.

La misma línea recta puede expresarse de cualquiera de las dos formas. El <line> del primer ejemplo es equivalente a un <path> que se mueve al punto de inicio (M50,30) y traza una línea hasta el punto final (L300,300):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg height="310" width="400">
      <!-- These two draw the same line -->
      <line x1="50" y1="30" x2="300" y2="300"
            stroke="rgb(8, 112, 177)" stroke-width="3" />
      <path d="M50,30 L300,300"
            stroke="rgb(255, 159, 0)" stroke-width="3" />
    </svg>
  </body>
</html>

La versión con <path> es más verbosa para un solo segmento, que es exactamente la razón por la que existe <line>. Si necesitas varios segmentos rectos unidos de extremo a extremo, usa <polyline> en lugar de apilar varios elementos <line>.

El elemento SVG <line> también admite los Atributos Globales y los Atributos de Eventos.

Práctica

Práctica
¿Qué conjunto de atributos define los dos extremos de una línea SVG?
¿Qué conjunto de atributos define los dos extremos de una línea SVG?
Was this page helpful?