Propriedade CSS stroke-width
Como usar a propriedade CSS stroke-width para definir a largura do contorno. Conheça a propriedade e veja os valores com exemplos.
A propriedade CSS stroke-width define a espessura do contorno (o "stroke") desenhado ao redor de uma forma SVG ou texto. O stroke é a linha pintada que segue o caminho da forma; stroke-width controla a espessura dessa linha.
Esta página aborda a sintaxe, os valores aceitos (comprimentos e porcentagens), como stroke-width interage com atributos de apresentação SVG e os detalhes sobre unidades e escalonamento com viewBox.
Por que usar stroke-width
No SVG, o contorno de uma forma e seu interior são pintados separadamente: a propriedade stroke pinta o contorno e fill pinta o interior. Um stroke só é visível quando tem largura diferente de zero, portanto stroke-width é o que faz um contorno aparecer de fato. Use-o para tornar bordas mais espessas ou mais finas, para desenhar grades de uma linha fina, ou para criar ícones e textos com contornos em negrito.
stroke-width vs. o atributo SVG
É possível definir a largura do stroke de duas formas: como atributo de apresentação SVG na marcação (stroke-width="3") ou como propriedade CSS. Quando ambos estão presentes, o CSS vence — uma regra CSS (ou um style inline) tem precedência sobre o atributo de apresentação. Esse é o motivo mais comum pelo qual um valor definido na marcação SVG parece ser "ignorado": uma folha de estilos está sobrescrevendo-o.
<!-- The CSS stroke-width: 1px wins over the attribute stroke-width="5". -->
<circle cx="5" cy="5" r="3" stroke-width="5" style="stroke-width: 1px;" />O stroke-width é um atributo de apresentação e pode ser aplicado a qualquer elemento, mas só tem efeito nos seguintes elementos: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> e <tspan>.
Unidades como px ou em são obrigatórias, exceto quando o valor é 0.
| Valor Inicial | 1 |
|---|---|
| Aplica-se a | Elementos de formas e conteúdo de texto. |
| Herdado | Sim. |
| Animável | Sim. |
| Versão | Especificação SVG 1.1 |
| Sintaxe DOM | Object.strokeWidth = "0.5"; |
Sintaxe
stroke-width: length | percentage | initial | inherit;A largura é centralizada no caminho: metade é pintada dentro da borda da forma e metade fora. Portanto, um stroke-width de 4 em um círculo de raio 3 adiciona 2 unidades além do raio e sobrepõe 2 unidades para dentro.
Exemplo da propriedade stroke-width:
Exemplo de código CSS stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 1px;" />
</svg>
</body>
</html>Resultado
Exemplo da propriedade stroke-width com o valor "length":
Outro exemplo de código CSS stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 3px;" />
</svg>
</body>
</html>Exemplo da propriedade stroke-width com o valor "%":
Uma porcentagem é resolvida em relação à diagonal do SVG — especificamente a diagonal do viewport (sqrt(width² + height²) / sqrt(2)), e não em relação ao tamanho da própria forma. Isso torna as larguras em porcentagem úteis quando se deseja que o stroke escale junto com o desenho.
Exemplo de valor percentual CSS stroke-width
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke-width property example</h2>
<svg viewBox="0 0 30 10">
<circle cx="5" cy="5" r="3" stroke="#1c87c9" style="stroke-width: 2%;" />
</svg>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| length | Especifica a largura do stroke. |
| percentage | Especifica a largura do stroke em %. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Notas e detalhes importantes
- Largura zero oculta o stroke.
stroke-width: 0não desenha nada, mesmo que uma cor destrokeesteja definida. - Unidades são obrigatórias para valores CSS diferentes de zero. Dentro de um
style/folha de estilos, use2px,0.5em, etc. A forma de número puro (stroke-width="3") só é válida como atributo SVG, onde o número é interpretado em unidades do espaço do usuário. - O stroke fica centrado no caminho. Como metade da largura fica fora da borda da forma, um stroke espesso pode ultrapassar o
viewBoxe ser cortado. Adicione espaçamento aoviewBoxse o contorno estiver sendo cortado. - Ele escala com o
viewBox. Umstroke-widthdado em unidades do usuário cresce e diminui conforme o SVG é escalado para caber em seu contêiner. Para manter uma espessura constante na tela independentemente do escalonamento, adicione o atributo SVGvector-effect="non-scaling-stroke"ao elemento.
Propriedades relacionadas
stroke— a cor (pintura) do contorno.stroke-linecap— a forma das extremidades de caminhos abertos.stroke-dasharray— transforma o stroke em uma linha tracejada.stroke-dashoffset— desloca o ponto de início do padrão de traços.fill— a cor do interior de uma forma.