Propriedade CSS stroke
Como usar a propriedade CSS stroke para pintar o contorno de elementos SVG. Conheça a propriedade e veja os valores com exemplos.
A propriedade CSS stroke pinta o contorno (a linha) de uma forma SVG ou de um texto. Enquanto fill colore o interior de uma forma, stroke colore sua borda — juntas, elas controlam como cada caminho, círculo, retângulo e elemento de texto SVG é desenhado.
Esta página aborda o que stroke faz, os valores que aceita, como interage com propriedades de traço relacionadas (largura, padrão de traço, extremidades de linha) e os erros comuns que costumam surgir.
Quando devo usar?
stroke afeta apenas conteúdo SVG — não tem efeito em elementos HTML comuns como <div> ou <p>. Use-a quando estiver:
- Desenhando ícones, gráficos ou diagramas inline com
<svg>. - Animando uma linha que "se desenha" (combine
strokecomstroke-dasharrayestroke-dashoffset). - Contornando texto SVG sem preenchê-lo.
Você pode encontrar cores da web nomeadas na seção cores HTML.
Propriedade CSS vs. atributo de apresentação
stroke é incomum: você pode defini-la como propriedade CSS ou como atributo de apresentação SVG escrito diretamente no elemento. Estas duas linhas produzem o mesmo resultado:
<!-- presentation attribute -->
<path stroke="#1c87c9" d="M5 20 l215 0" />
<!-- CSS, via a style block or stylesheet -->
<path style="stroke: #1c87c9;" d="M5 20 l215 0" />Quando ambos estão presentes, o CSS vence: um style inline (ou qualquer regra de folha de estilo) substitui o atributo de apresentação. Isso permite definir uma cor padrão na marcação e substituí-la via CSS — por exemplo, ao passar o cursor.
A propriedade stroke pode ser usada tanto como propriedade CSS quanto como atributo de apresentação. Pode ser aplicada a qualquer elemento, mas só produz efeito nos seguintes: <altGlyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref> e <tspan>.
| Valor inicial | none |
|---|---|
| Aplica-se a | Formas e elementos de conteúdo de texto. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | SVG 1.1 Specification |
| Sintaxe DOM | Object.stroke = "#1c87c9"; |
Sintaxe
Sintaxe CSS stroke
stroke: color | url | none | context-fill | context-stroke | initial | inherit;Exemplo da propriedade stroke:
Exemplo de código CSS stroke
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Stroke property example</h2>
<svg height="100" width="500">
<g fill="none">
<path stroke="#8ebf42" d="M5 20 l215 0" />
<path stroke="#1c87c9" d="M5 40 l215 0" />
<path stroke="#666666" d="M5 60 l215 0" />
</g>
</svg>
</body>
</html>Resultado
Exemplo com formas e CSS
Não é necessário escrever stroke como atributo — aqui ela é definida a partir de um bloco <style>, aplicada a várias formas de uma vez. Note fill: none para que apenas o contorno seja exibido:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.outline {
fill: none;
stroke: #1c87c9;
stroke-width: 4px;
}
circle.outline {
stroke: #8ebf42;
}
</style>
</head>
<body>
<h2>Stroke from a CSS rule</h2>
<svg height="120" width="300">
<rect class="outline" x="10" y="10" width="100" height="100" />
<circle class="outline" cx="220" cy="60" r="50" />
</svg>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| none | Nenhuma tinta é aplicada. |
| color | Define uma cor sólida. Nomes de cores, códigos hexadecimais, rgb(), rgba(), hsl(), hsla() podem ser usados. |
| url | Uma referência URL a um elemento servidor de tinta que define um servidor de tinta. |
| context-fill | Usa o valor de fill de um elemento de contexto. |
| context-stroke | Usa o valor de stroke de um elemento de contexto. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
O valor inicial é none, o que significa que uma forma sem stroke é desenhada sem nenhum contorno — mesmo que stroke-width esteja definido.
Propriedades de traço relacionadas
stroke define apenas a cor do contorno. Para controlar a aparência desse contorno, combine-a com:
stroke-width— a espessura da linha.stroke-dasharray— um padrão de traços e espaços em vez de uma linha sólida.stroke-dashoffset— onde o padrão de traços começa (a chave para animações de desenho de linha).stroke-linecap— a forma das extremidades da linha.
Erros comuns
- Nada aparece. Se
stroke-widthfor0(o padrão), o contorno é invisível independentemente da cor escolhida. Sempre defina uma largura. - A forma está preenchida. Se você quer apenas o contorno, defina
fill: none— caso contrário, o interior é pintado de preto por padrão. - Não funciona em um
<div>.strokesó tem efeito em gráficos SVG e elementos de texto:<altGlyph>,<circle>,<ellipse>,<line>,<path>,<polygon>,<polyline>,<rect>,<text>,<textPath>,<tref>e<tspan>.