Gradientes radiais SVG: mova o brilho com fx e fy

Para mover o brilho de um gradiente radial SVG sem mover a arte, defina fx e fy em seu <radialGradient>. 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 documenta esses atributos e padrões.

Pense nas duas edições como tarefas diferentes:

A coordenada focal horizontal é fx; a vertical é 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 xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="-20 0 200 120">
  <defs>
    <radialGradient id="highlight" gradientUnits="objectBoundingBox"
                    cx=".5" cy=".5" r=".6" fx=".22" fy=".18" fr="0" spreadMethod="pad">
      <stop offset="0" stop-color="#fff1d8"/>
      <stop offset=".45" stop-color="#ed805f"/>
      <stop offset="1" stop-color="#6f284c"/>
    </radialGradient>
  </defs>
  <path d="M20 20 H140 L160 60 L140 100 H20 L0 60 Z M50 38 H110 L130 60 L110 82 H50 L30 60 Z" fill="url(#highlight)" fill-rule="evenodd"/>
</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 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 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:

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:

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.

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:

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

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 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 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. 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 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 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 — Atributos dos círculos inicial/final e seus padrões.
2. MDN fx — Significado da coordenada focal horizontal.
3. MDN fy — Significado da coordenada focal vertical.
4. MDN fill-rule — Comportamento de preenchimento par-ímpar da abertura.
5. MDN gradientUnits — Limites do objeto, espaço de usuário e mapeamento elíptico.
6. Gradientes radiais SVG 2 — Geometria do círculo inicial e mudança da especificação para foco externo.
7. MDN spreadMethod — Comportamentos pad, repeat e reflect.