Degradados radiales SVG: mueve el brillo con fx y fy

Para mover el brillo de un degradado radial SVG sin mover el diseño, establece fx y fy en su <radialGradient>. Mantén cx, cy, r y el trazado sin cambios. Con fr="0", el punto focal inicia la progresión del color; el círculo final sigue controlando su extensión exterior. Si el brillo parece estirado, revisa gradientUnits y el cuadro delimitador de la forma antes de editar el contorno.

Este tutorial usa un emblema hexagonal ancho original con una abertura. Comparamos brillos centrados y desplazados, y después dos definiciones de pintura elegidas: una elipse relativa al objeto y un círculo en espacio de usuario. El SVG se creó directamente como código. Ningún servicio de calco ni editor produjo la muestra.

Separa el foco del círculo final

El degradado radial tiene un círculo inicial y otro final. En esta plantilla, fr="0" reduce el círculo inicial a un punto. fx y fy sitúan ese punto; cx, cy y r definen el círculo final. Si no estableces las coordenadas focales, toman de forma predeterminada las coordenadas centrales correspondientes. La referencia de radialGradient de MDN documenta estos atributos y valores predeterminados.

Piensa en las dos ediciones como tareas diferentes:

La coordenada focal horizontal es fx; la vertical es fy. Cambiar ambas mueve el punto inicial en diagonal. No cambia los puntos del trazado ni mueve su abertura.

Copia un SVG completo con brillo desplazado

Guárdalo como emblem.svg y ábrelo en un navegador. No depende de imágenes ni hojas de estilo externas.

<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 crear el control centrado, cambia solo fx=".22" fy=".18" por fx=".5" fy=".5". Deja intactos los demás atributos y ambos contornos de d.

El contorno exterior abarca de x=0 a 160 y de y=20 a 100. El segundo contorno define la abertura. fill-rule="evenodd" mantiene esa abertura sin pintar; mover el degradado no la rellena. La referencia de fill-rule de MDN explica la regla de cruces que usa este trazado compuesto.

El foco centrado está dentro de la abertura, así que el punto más brillante en sí no es visible. Aun así, ves la progresión de color que lo rodea sobre el anillo. El foco desplazado cae sobre la banda sólida superior izquierda, donde se hace visible la parada más clara. Esta diferencia ayuda cuando editar una coordenada parece cambiar poco: el foco puede estar detrás de una parte transparente de la marca.

Por qué el emblema ancho produce una mezcla elíptica

Con gradientUnits="objectBoundingBox", las coordenadas describen los límites del objeto pintado. Los límites de nuestro emblema son 160 × 80, aunque su lienzo SVG mide 200 × 120. Un círculo normalizado se transforma a través de ese cuadro no cuadrado en una elipse. La referencia de gradientUnits de MDN describe esta asignación.

Aquí, cx=".5" cy=".5" se asigna a (80, 60). El radio .6 se asigna a radios horizontal y vertical de 96 y 48. El foco desplazado se asigna a:

x = 0 + .22 × 160 = 35.2
y = 20 + .18 × 80 = 34.4

Para una región final circular en este SVG sin transformar, sustituye los atributos de coordenadas del degradado por:

gradientUnits="userSpaceOnUse"
cx="80" cy="60" r="64"
fx="35.2" fy="34.4" fr="0" spreadMethod="pad"

Su control centrado usa fx="80" fy="60". El radio es ahora de 64 unidades de usuario en ambas direcciones. Es una región final elegida distinta de la elipse de 96 × 48. Cambiamos la definición de coordenadas y el radio físico; esta comparación no aísla un cambio de unidades. Dentro de cada pareja centrada/desplazada, solo cambian las coordenadas focales.

Usa pintura relativa al objeto cuando la mezcla deba seguir las proporciones de cada forma. Usa números explícitos de espacio de usuario cuando su posición y extensión circular pertenezcan a las coordenadas del diseño. Para una mezcla compartida entre trazados de logotipo separados, consulta las unidades de degradado SVG.

Qué mostró la comparación original en el navegador

Abrimos los cuatro SVG creados en Chrome y mostramos cada uno a 100 × 60 y 300 × 180 píxeles CSS. La versión grande facilitó inspeccionar el brillo superior izquierdo. El mismo desplazamiento siguió visible en el tamaño pequeño y la abertura permaneció transparente en todas las muestras.

El informe de origen del navegador encontró un trazado, ningún elemento de imagen, valores d idénticos y los mismos límites de trazado de 160 × 80 en los cuatro archivos. Las lecturas de píxeles separadas al tamaño del lienzo de origen confirmaron el cambio de pintura:

La muestra superior izquierda está en la coordenada de diseño (35, 30); la muestra de la abertura está en (80, 60). Estas observaciones describen este origen y esta sesión del navegador. No establecen la salida de otro renderizador ni el comportamiento de importación de un editor.

Foco y límites de pintura

Mantén el foco dentro al ajustar la marca

Empieza con un foco interior y fr="0". En coordenadas normalizadas, la distancia del desplazamiento al centro es de aproximadamente .425, inferior a nuestro radio .6. En la versión de espacio de usuario, su distancia es de unos 51.6, inferior a 64. Ambas opciones mantienen el punto inicial dentro de su círculo final en el sistema de coordenadas donde se define ese círculo.

Las explicaciones antiguas pueden afirmar que un foco exterior siempre se limita al círculo final. SVG 2 permite que el círculo inicial quede fuera y define un comportamiento diferente, incluidas regiones sin pintar fuera de su cono de degradado. La especificación de degradados radiales de SVG 2 explica ese cambio. Esta plantilla usa puntos interiores; no probamos el renderizado de focos exteriores entre navegadores.

Mantén spreadMethod="pad" mientras revisas la posición. Más allá del alcance del degradado, pad usa el color de la última parada; repeat y reflect introducen repeticiones que pueden dificultar comparar el foco. La referencia de spreadMethod de MDN define esas opciones.

Antes de entregar, revisa estas tres cosas en el entorno que mostrará el SVG:

1. El brillo está sobre la banda sólida prevista al tamaño real de visualización.
2. La abertura sigue transparente y los datos del trazado siguen coincidiendo con el maestro.
3. El círculo o la elipse elegidos se adaptan a las proporciones de la marca.

Si los colores cambian después de exportar, revisa la pintura y el contexto de entrega con por qué cambian los colores SVG al exportar. Mover el punto focal es una edición de posición, así que cambiar al mismo tiempo los colores de las paradas dificulta interpretar la comparación.

Separa la recuperación de geometría del diseño de la pintura

Conserva un maestro plano de este emblema usando el mismo trazado con un relleno sólido y manteniendo la abertura. Guarda por separado la versión con degradado para el diseño web que la necesite. Un degradado es pintura asignada a un contorno; estas coordenadas focales no definen trazados de corte adicionales.

Si tu logotipo inicial solo existe como PNG o JPG, el vectorizador de logotipos de PerfectVector puede recuperar geometría vectorial para que la inspecciones antes de reconstruir esta pintura. Revisa el contorno exterior y la abertura, y después establece las coordenadas del degradado en tu flujo SVG. Un brillo ráster no conserva su fx, fy o radio originales como parámetros de diseño recuperables. Si ya tienes contornos vectoriales limpios, edita directamente su degradado. La guía de vectorización de degradados cubre la decisión de pasar de ráster a vector.

Preguntas frecuentes

¿Cómo muevo el brillo de un degradado radial SVG? Establece coordenadas fx y fy explícitas en radialGradient. Mantén cx, cy, r, las paradas y el trazado fijos al comparar el cambio. Con fr en cero, esas coordenadas focales sitúan el punto inicial de la progresión del color.

¿Por qué un degradado radial parece elíptico en mi SVG? Con unidades objectBoundingBox, un círculo normalizado se transforma a través de los límites del objeto pintado. Los límites no cuadrados producen una elipse. En un SVG sin transformar, las coordenadas userSpaceOnUse explícitas pueden definir una región circular en unidades del diseño.

¿Mover el punto focal rellenará la abertura del logotipo? No. El trazado compuesto y su regla de relleno determinan la abertura. Este ejemplo usa evenodd y mantiene el mismo trazado en todas las muestras; su abertura sigue transparente cuando se mueve el foco.

¿La vectorización puede recuperar las coordenadas focales originales del degradado? Una imagen ráster no conserva los parámetros originales del degradado SVG. Recupera e inspecciona los contornos si hace falta, reconstruye después la pintura y revisa el brillo en el entorno de visualización previsto.

Fuentes

1. MDN radialGradient — Atributos de los círculos inicial y final y sus valores predeterminados.
2. MDN fx — Significado de la coordenada focal horizontal.
3. MDN fy — Significado de la coordenada focal vertical.
4. MDN fill-rule — Comportamiento de relleno par-impar para la abertura.
5. MDN gradientUnits — Límites del objeto, espacio de usuario y transformación elíptica.
6. Degradados radiales de SVG 2 — Geometría del círculo inicial y cambio en la especificación del foco exterior.
7. MDN spreadMethod — Comportamiento de pad, repeat y reflect.