W3docs
pt
Entrar

Linha SVG

Aprenda o elemento SVG <line>: desenhe uma linha reta com x1/y1/x2/y2, estilize com stroke, adicione traços e setas, e compare com <path>.

Descrição do elemento <line>

O elemento SVG <line> desenha uma única linha reta entre dois pontos: um ponto inicial (x1, y1) e um ponto final (x2, y2). Utilize-o sempre que precisar de uma régua básica, eixo, conector ou divisor dentro de um <svg> — é a maneira mais simples e legível de expressar "uma linha de A para B".

Todos os quatro atributos de coordenadas assumem o valor padrão 0 e aceitam comprimentos (unidades de usuário, como 30 ou 30px) ou porcentagens relativas ao viewport (como 50%). Portanto, um <line> sem atributos é uma linha de comprimento zero na origem, que não renderiza nada.

Como um <line> é geometricamente unidimensional, ele não possui área interior. O SVG preenche o interior de uma forma com a pintura fill e pinta seu contorno com a pintura stroke — e uma linha não tem interior. Por esse motivo, o atributo fill é ignorado, e uma linha fica invisível até que você defina um stroke.

Exemplo do 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>
Experimente Você Mesmo »

Vamos explicar o código acima:

  • O atributo x1 especifica a coordenada x inicial.
  • O atributo y1 especifica a coordenada y inicial.
  • O atributo x2 especifica a coordenada x final.
  • O atributo y2 especifica a coordenada y final.

Por padrão, as linhas são desenhadas com um traço preto e largura de traço de 1 pixel. Você pode personalizar isso usando os atributos stroke e stroke-width, como mostrado no exemplo.

Estilizando linhas: traços, extremidades e setas

A aparência de uma linha é controlada inteiramente pelas propriedades relacionadas ao stroke. O exemplo abaixo desenha três linhas com tratamentos diferentes:

  • stroke-dasharray transforma uma linha sólida em uma linha tracejada ou pontilhada. O valor é uma lista de comprimentos de traços e espaços (8 4 significa um traço de 8 unidades seguido de um espaço de 4 unidades, repetido).
  • stroke-linecap define a forma das extremidades da linha — butt (o padrão, plano), round ou 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>

Mais duas propriedades são úteis com linhas:

  • marker-end anexa um <marker> reutilizável (definido em <defs>) ao final da linha — a maneira padrão de adicionar uma seta.
  • vector-effect="non-scaling-stroke" mantém a largura do traço constante mesmo quando o SVG é dimensionado, de modo que uma linha fina permanece fina independentemente do zoom.

SVG <line> vs SVG <path>

Os elementos SVG <line> e <path> desenham linhas, mas servem a propósitos diferentes. O elemento <line> foi projetado especificamente para linhas retas simples e é mais semântico e eficiente para essa tarefa. O elemento <path> é usado para definir formas complexas ou múltiplas linhas e curvas conectadas. Embora <path> possa desenhar linhas retas, geralmente é melhor usar <line> para segmentos retos básicos e reservar <path> para desenhos mais complexos.

A mesma linha reta pode ser expressa de qualquer forma. O <line> do primeiro exemplo é equivalente a um <path> que move para o ponto inicial (M50,30) e desenha uma linha até o ponto 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>

A versão com <path> é mais verbosa para um único segmento, o que é exatamente o motivo pelo qual <line> existe. Se você precisar de vários segmentos retos unidos ponta a ponta, use <polyline> em vez de empilhar muitos elementos <line>.

O elemento SVG <line> também suporta os Atributos Globais e os Atributos de Evento.

Prática

Prática
Qual conjunto de atributos define os dois pontos extremos de uma linha SVG?
Qual conjunto de atributos define os dois pontos extremos de uma linha SVG?
Was this page helpful?