Propriedade CSS stroke-linecap
Como usar a propriedade CSS stroke-linecap para especificar os pontos inicial e final do contorno de um elemento. Veja os valores disponíveis.
A propriedade stroke-linecap especifica o formato a ser usado nas extremidades abertas de um traço SVG. Ela altera apenas como os dois pontos finais de um caminho aberto são desenhados — não tem efeito nos cantos onde dois segmentos de linha se encontram, nem em formas fechadas que não possuem extremidades abertas.
Esta página explica como cada valor de terminação se parece, como stroke-linecap interage com a especificidade CSS e o caso especial do "caminho de comprimento zero" que permite desenhar um único ponto.
Quando devo usá-la?
Sempre que você desenhar linhas ou caminhos abertos em SVG e quiser controlar como a linha termina:
roundé a escolha mais comum para traços com estilo desenhado à mão, barras de progresso e linhas de gráficos — proporciona um visual suave e acabado.squareé útil quando você quer que a linha se estenda ligeiramente além do seu ponto final (por exemplo, para que duas linhas adjacentes se toquem de forma limpa).butt(o padrão) corta a linha exatamente na coordenada final — escolha-o quando o comprimento preciso importa.
Um truque prático: um caminho com comprimento zero (um traço que começa e termina no mesmo ponto) é renderizado como um único ponto quando stroke-linecap é round ou square, e é renderizado como nada quando é butt. Esta é a forma padrão de desenhar pontos em SVG.
CSS ou atributo de apresentação?
stroke-linecap é tanto uma propriedade CSS quanto um atributo de apresentação SVG. Isso oferece duas formas de defini-lo:
- Como atributo no elemento:
<path stroke-linecap="round" /> - Como declaração CSS:
path { stroke-linecap: round; }
Um atributo de apresentação se comporta como o estilo de menor prioridade, portanto qualquer regra CSS o substitui. style="…" inline e folhas de estilo externas prevalecem sobre o atributo; entre as regras CSS, aplica-se a especificidade normal.
A propriedade stroke-linecap pode ser aplicada a qualquer elemento, mas afeta apenas os elementos de forma e conteúdo de texto SVG: <path>, <line>, <polyline>, <text>, <textPath> e <tspan>. Ela não afeta formas fechadas como <rect>, <circle> ou <polygon>, pois essas não possuem extremidades abertas.
| Valor Inicial | butt |
|---|---|
| Aplica-se a | Elementos de forma e conteúdo de texto. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | Especificação SVG 1.1 |
| Sintaxe DOM | Object.strokeLinecap = "round"; |
Sintaxe
Sintaxe CSS do stroke-linecap
stroke-linecap: butt | square | round | initial | inherit;Exemplo da propriedade stroke-linecap:
Exemplo de código CSS stroke-linecap
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-linecap property example</h2>
<svg viewBox="0 0 6 4">
<!-- Effect of the "butt" value -->
<path d="M1,1 h4" stroke="#8ebf42"
stroke-linecap="butt" />
<!-- Effect of the "butt" value on a zero length path -->
<path d="M3,3 h0" stroke="#8ebf42"
stroke-linecap="butt" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
<circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
</svg>
</body>
</html>Com butt, o traço verde para exatamente nas coordenadas (1,1) e (5,1) — marcadas pelos pontos azuis — portanto o seu comprimento visível é igual ao comprimento do caminho. O caminho de comprimento zero em (3,3) não renderiza nada.
Resultado
Exemplo da propriedade stroke-linecap com o valor "round":
Exemplo CSS stroke-linecap com round
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-linecap property example</h2>
<svg viewBox="0 0 6 4">
<!-- Effect of the "round" value -->
<path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="round" />
<!-- Effect of the "round" value on a zero length path -->
<path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="round" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
<circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
</svg>
</body>
</html>Com round, um semicírculo de raio stroke-width / 2 é adicionado além de cada ponto final, fazendo com que a linha verde ultrapasse levemente os pontos azuis. O caminho de comprimento zero em (3,3) se torna um círculo preenchido — é o truque do ponto em ação.
Exemplo da propriedade stroke-linecap com o valor "square":
Exemplo CSS stroke-linecap com square
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-linecap property example</h2>
<svg viewBox="0 0 6 4">
<!-- Effect of the "square" value -->
<path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="square" />
<!-- Effect of the "square" value on a zero length path -->
<path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="square" />
<!--
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
<circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
</svg>
</body>
</html>square é semelhante a round no sentido de que o traço se estende além do ponto final por stroke-width / 2, mas a terminação adicionada é um retângulo em vez de um semicírculo, criando uma borda plana. O caminho de comprimento zero em (3,3) é renderizado como um pequeno quadrado.
Valores
| Valor | Descrição |
|---|---|
butt | Padrão. Termina o traço de forma plana, exatamente no ponto final, sem adicionar extensão. Um subcaminho de comprimento zero não é renderizado. |
round | Adiciona uma terminação semicircular de raio stroke-width / 2 além de cada ponto final, criando extremidades arredondadas. Um subcaminho de comprimento zero é renderizado como um ponto. |
square | Adiciona uma terminação retangular que se estende stroke-width / 2 além de cada ponto final, criando extremidades planas que ultrapassam o caminho. Um subcaminho de comprimento zero é renderizado como um pequeno quadrado. |
initial | Redefine a propriedade para seu valor padrão (butt). |
inherit | Herda o valor do elemento pai. stroke-linecap é herdado por padrão. |
Propriedades relacionadas
stroke-linecap é uma das várias propriedades de traço SVG que controlam como as linhas são desenhadas:
stroke— define a cor do traço.stroke-width— define a espessura do traço (e, portanto, o tamanho das terminações).stroke-dasharray— transforma um traço sólido em tracejados; cada tracejado recebe suas próprias terminações.stroke-dashoffset— desloca o ponto de início do padrão de tracejado.fill— define a cor usada para pintar o interior de uma forma.