> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# Gradiente SVG ao longo do caminho: confira a curva
> Compare um gradiente SVG de coordenadas com faixas de cor planejadas em uma fita curva. Examine a origem, teste dois tamanhos e escolha a solução geométrica.
Source: https://perfectvector.com/pt-BR/blog/svg-gradient-curved-stroke
Language: pt-BR
Author: Irene Kim
Published: 2026-10-05T08:00:00+09:00
Updated: 2026-10-05T08:00:00+09:00
Um `linearGradient` SVG comum não mede o progresso ao longo de um caminho curvo. Ele pinta conforme um vetor de gradiente em um sistema de coordenadas. Se uma fita faz a volta e retorna, dois pontos na mesma posição ao longo desse vetor podem receber a mesma cor, embora estejam distantes ao longo da fita.
Para um design estático que precisa de progressão de cor ao redor de uma curva, você pode criar seções coloridas separadas. Isso dá controle da sequência, mas acrescenta geometria e limites de cor visíveis. Nosso exemplo original compara um gradiente horizontal com oito faixas deliberadas na mesma rota criada. Os dois arquivos contêm caminhos e nenhuma imagem incorporada.
## Confira onde a cor se repete
A [especificação de servidores de pintura SVG2](https://www.w3.org/TR/SVG2/pservers.html) define gradientes lineares por um vetor e seus pontos de cor. Descreve gradientes radiais por sua própria geometria circular. Nenhuma definição transforma um caminho arbitrário em um eixo de cor por distância percorrida.
Nossa fita começa no alto à esquerda, segue à direita, contorna um semicírculo e retorna para baixo à esquerda. Um gradiente horizontal torna as duas extremidades esquerdas laranjas e a curva direita roxa. É um gradiente válido de coordenadas; apenas responde a uma pergunta de design diferente de “mude a cor do início ao fim desta rota”.
O [tutorial de gradientes da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) explica o modelo de extremidades e pontos de cor. Adicionar mais pontos muda essa sequência baseada em coordenadas. Não faz a pintura seguir a curva.
**Cor por coordenadas e faixas criadas**
*Ilustração: um gradiente de coordenadas pode repetir cores em uma rota de retorno, enquanto faixas separadas atribuem outra sequência do início ao fim. As contagens reais de origem e amostras do navegador abaixo vêm de SVGs criados de forma independente.*
## Mantenha um gradiente comum como controle
Salve este arquivo completo como `coordinate.svg`. O caminho usa um traço de 24 unidades dentro de um viewBox `200×160`. Suas partes retas e o semicírculo à direita formam uma linha central editável.
```svg
```
Usamos `gradientUnits="userSpaceOnUse"` para explicitar as extremidades do gradiente no sistema de coordenadas de origem. Mudar para coordenadas de caixa delimitadora mudaria a expressão dessas extremidades; não introduziria pintura por distância do caminho. Veja a [referência de gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) e nosso [guia de coordenadas de gradiente](https://perfectvector.com/pt-BR/blog/svg-gradient-units).
A rota inteira é um elemento `path`. Mantenha essa versão simples como original de geometria mesmo que decida entregar um tratamento de cor mais elaborado.
## Crie uma sequência em etapas ao redor da curva
Salve o conteúdo a seguir como `bands.svg`. Ele divide a reta superior em duas peças, o semicírculo em quatro arcos e a reta de retorno em duas peças. As cores são atribuídas na ordem da rota, do laranja no início superior ao roxo na extremidade inferior.
```svg
```
São oito faixas escolhidas manualmente, com segmentos de comprimentos desiguais. Não são um cálculo de incrementos uniformes de cor por unidade de comprimento do caminho e não criam sombreamento contínuo. As extremidades decimais arredondadas dos arcos aproximam a rota original; este exemplo não afirma contornos idênticos em pixels.
A [referência de `path`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) documenta o elemento e seus dados de caminho. Cada seção aqui continua uma linha central com traço, não um preenchimento fechado contornado. Se um destino exige formas fechadas, prepare e examine essa geometria separadamente em vez de tratar esses pedaços de traço como contornos de corte.
Usamos [`stroke-linecap="butt"`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) para que peças adjacentes não ultrapassem suas extremidades. Pontas arredondadas em cada seção interna sobreporiam cores vizinhas. As transições de reta para arco também precisam de direções correspondentes; nosso [guia de junções suaves](https://perfectvector.com/pt-BR/blog/svg-bezier-smooth-joins) cobre separadamente a continuidade geométrica.
## Compare dois tamanhos e duas posições
Renderizamos os dois arquivos originais no Chrome a `200×160` e `400×320` pixels CSS. O navegador decodificou cada SVG e o pintou em um Canvas cujas dimensões internas correspondiam às de teste. A razão de pixels do dispositivo era 2; essas amostras registradas vêm do buffer do Canvas, não da contagem de pixels de dispositivo de uma captura.
Nas coordenadas de origem `(60,30)` e `(60,130)`, os pontos ficam em retas diferentes da rota. Compartilham a mesma coordenada horizontal, portanto o gradiente horizontal fornece a mesma cor amostrada.
| Arquivo | Amostra superior em x=60 | Amostra inferior em x=60 | Caminhos | Imagens incorporadas |
| --------------------------- | ------------------------ | ------------------------ | -------- | -------------------- |
| Gradiente de coordenadas | RGB 202,100,71 | RGB 202,100,71 | 1 | 0 |
| Faixas criadas | RGB 227,107,44 | RGB 112,75,170 | 8 | 0 |
| Original plano de geometria | RGB 184,94,57 | RGB 184,94,57 | 1 | 0 |
Os pares de amostras eram iguais nos dois tamanhos testados, com alfa 255 nos interiores pintados. A área aberta na origem `(100,80)` tinha alfa zero nos seis casos. Isso verifica esses arquivos criados neste navegador; não certifica todo renderizador ou todos os pixels de limites.
A renderização em faixas mantém mudanças discretas de cor visíveis nos dois tamanhos. Examine as junções no tamanho entregue, especialmente após exportação ou incorporação. Peças separadas podem revelar emendas por antisserrilhamento, arredondamento ou edições posteriores. Aumentar o número de seções pode reduzir o tamanho de cada passo de cor, mas também cria mais caminhos e limites para manter.
## Escolha o tratamento antes de expandir a arte
| Necessidade de design | Ponto de partida útil | Custo a examinar |
| ------------------------------------------------- | -------------------------------------------------------------- | --------------------------------------------------------------------- |
| Cor segue uma direção da página | Um gradiente de coordenadas | Posições das extremidades e limites da origem |
| Progressão estática ao redor desta rota | Seções coloridas deliberadas | Cores das seções, junções tangentes e emendas |
| Progressão suave ao longo de uma curva arbitrária | Aproximação projetada separadamente ou outro método de entrega | Amostragem, interseções, geometria editável e renderização no destino |
Girar um gradiente linear muda sua direção. Repeti-lo muda como as cores se estendem. Nenhuma operação faz com que ele vire continuamente com essa linha central de retorno. Um gradiente radial pode servir a uma composição circular, mas tem sua própria geometria de pintura, não uma solução geral de distância da rota.
Se ajustar a curva depois, revise as seções juntas. Mantenha um original plano para comparar a rota pretendida e preserve a cópia de tratamento de cor separadamente. Nosso [guia de caminhos relativos](https://perfectvector.com/pt-BR/blog/svg-relative-path-commands) ajuda a ler ou mover os comandos de caminho subjacentes.
Se a arte inicial é PNG ou JPG e você precisa de contornos editáveis, [converta a origem com o PerfectVector](https://perfectvector.com/pt-BR/image-to-vector), examine a forma e as áreas abertas recuperadas e mantenha um original SVG limpo. Escolha ou reconstrua o tratamento de cor depois de conferir essa geometria. A vetorização não garante recuperar exatamente o sombreamento contínuo nem inventa um recurso nativo de gradiente ao longo do caminho. Um SVG limpo existente precisa de edição direta de pintura e geometria; o [guia de vetorização de imagens](https://perfectvector.com/pt-BR/blog/what-is-image-vectorization) explica quando converter raster ajuda.
## Perguntas frequentes
**Posso fazer um linearGradient seguir qualquer traço curvo?**
A definição comum de linearGradient não fornece uma configuração por distância do caminho. Seu vetor de coordenadas controla a pintura. O exemplo em etapas atribui cores separadas a seções separadas da rota.
**Mais pontos de gradiente corrigem as cores no retorno?**
Mais pontos refinam as transições ao longo do vetor de gradiente. Pontos na mesma posição ao longo desse vetor ainda compartilham a mesma pintura por coordenadas.
**O arquivo de faixas contém uma imagem raster?**
Não. Nosso exemplo criado contém oito elementos de caminho e nenhum elemento de imagem. Também tem passos visíveis de cor em vez de um gradiente contínuo por distância do caminho.
**Devo substituir todo gradiente por caminhos separados?**
Use o gradiente de coordenadas mais simples quando ele combinar com o design. Seções separadas são úteis quando a progressão e o custo de edição forem aceitáveis; examine emendas e renderização no destino antes da entrega.
## Fontes
1. [W3C — Servidores de pintura SVG2](https://www.w3.org/TR/SVG2/pservers.html) — Vetores de gradiente, pontos de cor e pintura por coordenadas.
2. [MDN — Gradientes em SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorials/SVG_from_scratch/Gradients) — Construção de gradientes lineares e radiais.
3. [MDN — gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Sistemas de coordenadas de espaço de usuário e caixa delimitadora.
4. [MDN — path](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/path) — Elementos de caminho e dados de caminho inspecionáveis.
5. [MDN — stroke-linecap](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linecap) — Comportamento das extremidades de traço retas e arredondadas.
## Explore
- [Read the HTML article](https://perfectvector.com/pt-BR/blog/svg-gradient-curved-stroke)
- [Arredonde cantos SVG mudando a forma preenchida](https://perfectvector.com/pt-BR/blog/round-svg-path-corners.md)
- [Quebra de texto SVG: crie linhas medidas com tspan](https://perfectvector.com/pt-BR/blog/svg-text-wrap-tspan.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)