> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Gradientes radiais SVG: mova o brilho com fx e fy > Mova o brilho de um gradiente radial SVG com fx e fy, compare pintura circular e elíptica e mantenha o contorno e a abertura transparente do emblema inalterados. Source: https://perfectvector.com/pt-BR/blog/svg-radial-gradient-focus Language: pt-BR Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 Para mover o brilho de um gradiente radial SVG sem mover a arte, defina `fx` e `fy` em seu ``. Mantenha `cx`, `cy`, `r` e o caminho inalterados. Com `fr="0"`, o ponto focal inicia a progressão de cores; o círculo final continua controlando a extensão externa. Se o brilho parecer esticado, confira `gradientUnits` e a caixa delimitadora da forma antes de editar o contorno. Este passo a passo usa um emblema hexagonal largo original com uma abertura. Comparamos brilhos centralizados e deslocados, depois duas definições de pintura escolhidas: uma elipse relativa ao objeto e um círculo no espaço de usuário. O SVG foi criado diretamente como código. Nenhum serviço de traçado ou editor produziu o exemplo. ## Separe o foco do círculo final O gradiente radial tem um círculo inicial e um final. Neste exemplo, `fr="0"` reduz o círculo inicial a um ponto. `fx` e `fy` posicionam esse ponto; `cx`, `cy` e `r` definem o círculo final. Sem definir as coordenadas focais, elas assumem as coordenadas correspondentes do centro. A [referência de radialGradient da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) documenta esses atributos e padrões. Pense nas duas edições como tarefas diferentes: | Mudança desejada | Edite | Mantenha fixo na comparação | | -------------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------- | | Mover a área mais clara para o alto à esquerda | `fx` e `fy` | Coordenadas do círculo final, pontos de cor e caminho | | Mover toda a região de pintura | `cx` e `cy`, revisando as coordenadas focais explícitas | Caminho | | Mudar o alcance da pintura | `r` | Centro, foco e caminho | | Manter uma região circular de pintura em uma forma larga | Escolha coordenadas no espaço de usuário | Revise todos os valores de coordenadas e o raio | A coordenada focal horizontal é [`fx`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx); a vertical é [`fy`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy). Mudar ambas move o ponto inicial na diagonal. Não muda os pontos do caminho nem move sua abertura. ## Copie um SVG completo com brilho deslocado Salve como `emblem.svg` e abra em um navegador. Ele não depende de imagem ou folha de estilos externa. ```svg ``` Para criar o controle centralizado, mude apenas `fx=".22" fy=".18"` para `fx=".5" fy=".5"`. Deixe os outros atributos e os dois contornos em `d` como estão. O contorno externo vai de `x=0` a `160` e de `y=20` a `100`. O segundo contorno define a abertura. `fill-rule="evenodd"` mantém essa abertura sem pintura; mover o gradiente não a preenche. A [referência de fill-rule da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) explica a regra de cruzamento usada por esse caminho composto. O foco centralizado fica na abertura, portanto o ponto mais claro em si é invisível. Você ainda vê a progressão de cores ao redor do anel. O foco deslocado cai na faixa sólida superior esquerda, onde o ponto de cor mais claro fica visível. Essa distinção ajuda quando uma edição de coordenadas parece fazer pouco: o foco pode estar atrás de uma parte transparente da marca. ## Por que o emblema largo recebe uma mistura elíptica Com `gradientUnits="objectBoundingBox"`, as coordenadas descrevem os limites do objeto pintado. Os limites do nosso emblema são `160 × 80`, embora a tela SVG seja `200 × 120`. Um círculo normalizado se transforma em elipse ao ser mapeado nessa caixa não quadrada. A [referência de gradientUnits da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) descreve esse mapeamento. Aqui, `cx=".5" cy=".5"` se mapeia para `(80, 60)`. O raio `.6` se mapeia para raios horizontal e vertical de `96` e `48`. O foco deslocado se mapeia para: ```text x = 0 + .22 × 160 = 35.2 y = 20 + .18 × 80 = 34.4 ``` Para uma região final circular neste SVG sem transformação, substitua os atributos de coordenadas do gradiente por: ```svg gradientUnits="userSpaceOnUse" cx="80" cy="60" r="64" fx="35.2" fy="34.4" fr="0" spreadMethod="pad" ``` Seu controle centralizado usa `fx="80" fy="60"`. O raio agora é `64` unidades de usuário nas duas direções. É uma região final escolhida diferente da elipse `96 × 48`. Mudamos a definição das coordenadas e o raio físico; esta comparação não isola uma troca de unidades. Dentro de cada par centralizado/deslocado, somente as coordenadas focais mudam. Use pintura relativa ao objeto quando a mistura deve acompanhar as proporções de cada forma. Use números explícitos do espaço de usuário quando a posição e a extensão circular pertencerem às coordenadas da arte. Para uma mistura compartilhada entre caminhos separados do logotipo, veja [unidades de gradiente SVG](https://perfectvector.com/pt-BR/blog/svg-gradient-units). ## O que a comparação original no navegador mostrou Abrimos os quatro SVGs criados no Chrome e exibimos cada um a `100 × 60` e `300 × 180` pixels CSS. A versão maior facilitou examinar o brilho no alto à esquerda. O mesmo deslocamento continuou visível no tamanho menor, enquanto a abertura permaneceu transparente em todos os exemplos. O relatório de origem do navegador encontrou um caminho, nenhum elemento de imagem, valores `d` idênticos e os mesmos limites de caminho `160 × 80` nos quatro arquivos. Leituras separadas de pixels no tamanho de tela de origem confirmaram a mudança de pintura: | Definição de pintura | Foco | Amostra RGBA superior esquerda | Alfa da abertura | | ---------------------------- | ------------ | ------------------------------ | ---------------- | | Limites do objeto, raio `.6` | Centralizado | `164, 77, 84, 255` | `0` | | Limites do objeto, raio `.6` | Deslocado | `246, 184, 155, 255` | `0` | | Espaço de usuário, raio `64` | Centralizado | `149, 67, 82, 255` | `0` | | Espaço de usuário, raio `64` | Deslocado | `248, 196, 168, 255` | `0` | A amostra superior esquerda fica na coordenada da arte `(35, 30)`; a amostra da abertura em `(80, 60)`. Essas observações descrevem esta origem e sessão de navegador. Não estabelecem a saída de outro renderizador nem o comportamento de importação de um editor. **Foco e limites de pintura** ![Ilustração conceitual comparando posições de brilho em emblemas e mostrando guias dos limites de pintura.](https://perfectvector.com/blog/svg-radial-gradient-focus/focus-and-bounds.webp) *Ilustração: um brilho pode se mover dentro de um contorno inalterado. As guias explicam a geometria da pintura; não é o exemplo do navegador nem um resultado de traçado.* ## Mantenha o foco dentro enquanto ajusta a marca Comece com um foco interno e `fr="0"`. Nas coordenadas normalizadas, a distância do deslocamento ao centro é cerca de `.425`, abaixo do nosso raio `.6`. Na versão de espaço de usuário, a distância é cerca de `51.6`, abaixo de `64`. As duas escolhas mantêm o ponto inicial dentro do círculo final no sistema de coordenadas em que esse círculo é definido. Explicações antigas podem dizer que um foco externo é sempre limitado ao círculo final. O SVG 2 permite que o círculo inicial fique fora e define outro comportamento, incluindo regiões sem pintura fora do cone de gradiente. A [especificação de gradiente radial SVG 2](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) explica a mudança. Este exemplo usa pontos internos; não testamos renderização de foco externo entre navegadores. Mantenha `spreadMethod="pad"` ao conferir a posição. Além da extensão do gradiente, `pad` usa a cor do último ponto; `repeat` e `reflect` introduzem repetição que pode dificultar a comparação de foco. A [referência de spreadMethod da MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) define essas escolhas. Antes da entrega, confira três coisas no ambiente que exibirá o SVG: 1. O brilho fica na faixa sólida pretendida no tamanho real de exibição. 2. A abertura continua transparente e os dados do caminho ainda correspondem ao original mestre. 3. O círculo ou a elipse escolhidos combinam com as proporções da marca. Se as cores mudarem após a exportação, examine a pintura e o contexto de entrega com [por que as cores SVG mudam após exportar](https://perfectvector.com/pt-BR/blog/why-svg-colors-change-after-export). Mover o ponto focal é uma edição de posição, portanto mudar as cores dos pontos ao mesmo tempo torna a comparação mais difícil de interpretar. ## Separe a recuperação da geometria do design da pintura Mantenha um original plano deste emblema usando o mesmo caminho com preenchimento sólido e preservando a abertura. Salve a versão com gradiente separadamente para a arte web que precisa dela. Um gradiente é pintura atribuída a um contorno; essas coordenadas focais não definem caminhos adicionais de corte. Se seu logotipo inicial existe só como PNG ou JPG, o [vetorizador de logotipos do PerfectVector](https://perfectvector.com/pt-BR/vectorize-logo) pode recuperar geometria vetorial para examinar antes de reconstruir essa pintura. Confira o contorno externo e a abertura e defina as coordenadas do gradiente no seu fluxo SVG. Um brilho raster não preserva seu `fx`, `fy` ou raio originais como parâmetros recuperáveis de design. Se já tem contornos vetoriais limpos, edite o gradiente diretamente. O [guia de vetorização de gradientes](https://perfectvector.com/pt-BR/blog/vectorize-gradients) cobre a decisão de raster para vetor. ## Perguntas frequentes **Como movo o brilho de um gradiente radial SVG?** Defina coordenadas fx e fy explícitas em radialGradient. Mantenha cx, cy, r, pontos de cor e caminho fixos ao comparar a mudança. Com fr em zero, essas coordenadas focais posicionam o ponto inicial da progressão de cores. **Por que um gradiente radial parece elíptico no meu SVG?** Com unidades objectBoundingBox, um círculo normalizado é mapeado pelos limites do objeto pintado. Limites não quadrados produzem uma elipse. Em um SVG sem transformação, coordenadas userSpaceOnUse explícitas podem definir uma região circular em unidades da arte. **Mover o ponto focal preenche a abertura do logotipo?** Não. O caminho composto e sua regra de preenchimento determinam a abertura. Este exemplo usa evenodd e mantém o mesmo caminho em todos os exemplos; a abertura continua transparente quando o foco se move. **A vetorização pode recuperar as coordenadas focais do gradiente original?** Uma imagem raster não mantém os parâmetros originais do gradiente SVG. Recupere e examine os contornos se necessário; depois reconstrua a pintura e confira o brilho no ambiente pretendido de exibição. ## Fontes 1. [MDN radialGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) — Atributos dos círculos inicial/final e seus padrões. 2. [MDN fx](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx) — Significado da coordenada focal horizontal. 3. [MDN fy](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy) — Significado da coordenada focal vertical. 4. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Comportamento de preenchimento par-ímpar da abertura. 5. [MDN gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Limites do objeto, espaço de usuário e mapeamento elíptico. 6. [Gradientes radiais SVG 2](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) — Geometria do círculo inicial e mudança da especificação para foco externo. 7. [MDN spreadMethod](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) — Comportamentos pad, repeat e reflect. ## Explore - [Read the HTML article](https://perfectvector.com/pt-BR/blog/svg-radial-gradient-focus) - [Gradiente SVG ao longo do caminho: confira a curva](https://perfectvector.com/pt-BR/blog/svg-gradient-curved-stroke.md) - [SVG feColorMatrix: recolora sem mudar preenchimentos](https://perfectvector.com/pt-BR/blog/svg-fecolormatrix.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)