> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Degradados radiales SVG: mueve el brillo con fx y fy > Mueve el brillo de un degradado radial SVG con fx y fy, compara pintura circular y elíptica, y conserva el contorno y la abertura transparente del emblema. Source: https://perfectvector.com/es/blog/svg-radial-gradient-focus Language: es Author: Irene Kim Published: 2026-10-02T08:00:00+09:00 Updated: 2026-10-02T08:00:00+09:00 Para mover el brillo de un degradado radial SVG sin mover el diseño, establece `fx` y `fy` en su ``. 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) documenta estos atributos y valores predeterminados. Piensa en las dos ediciones como tareas diferentes: | Cambio deseado | Qué editar | Qué mantener fijo al comparar | | ---------------------------------------------------------- | --------------------------------------------------------- | --------------------------------------------------- | | Mover el área más clara hacia arriba a la izquierda | `fx` y `fy` | Coordenadas del círculo final, paradas y trazado | | Mover toda la región de pintura | `cx` y `cy`, revisando las coordenadas focales explícitas | Trazado | | Cambiar el alcance de la pintura | `r` | Centro, foco y trazado | | Mantener una región de pintura circular en una forma ancha | Elegir coordenadas de espacio de usuario | Revisar todos los valores de coordenadas y el radio | La coordenada focal horizontal es [`fx`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx); la vertical es [`fy`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/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 ``` 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) 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: ```text 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: ```svg 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](https://perfectvector.com/es/blog/svg-gradient-units). ## 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: | Definición de pintura | Foco | Muestra RGBA superior izquierda | Alfa de la abertura | | ------------------------------ | ---------- | ------------------------------- | ------------------- | | Límites del objeto, radio `.6` | Centrado | `164, 77, 84, 255` | `0` | | Límites del objeto, radio `.6` | Desplazado | `246, 184, 155, 255` | `0` | | Espacio de usuario, radio `64` | Centrado | `149, 67, 82, 255` | `0` | | Espacio de usuario, radio `64` | Desplazado | `248, 196, 168, 255` | `0` | 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** ![Ilustración conceptual que compara posiciones del brillo en emblemas y muestra guías del límite de pintura.](https://perfectvector.com/blog/svg-radial-gradient-focus/focus-and-bounds.webp) *Ilustración: un brillo puede moverse dentro de un contorno que no cambia. Las guías explican la geometría de la pintura; no es la muestra del navegador ni un resultado de calco.* ## 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](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) 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](https://perfectvector.com/es/blog/why-svg-colors-change-after-export). 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](https://perfectvector.com/es/vectorize-logo) 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](https://perfectvector.com/es/blog/vectorize-gradients) 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) — Atributos de los círculos inicial y final y sus valores predeterminados. 2. [MDN fx](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx) — Significado de la coordenada focal horizontal. 3. [MDN fy](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy) — Significado de la coordenada focal vertical. 4. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Comportamiento de relleno par-impar para la abertura. 5. [MDN gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Límites del objeto, espacio de usuario y transformación elíptica. 6. [Degradados radiales de SVG 2](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) — Geometría del círculo inicial y cambio en la especificación del foco exterior. 7. [MDN spreadMethod](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) — Comportamiento de pad, repeat y reflect. ## Explore - [Read the HTML article](https://perfectvector.com/es/blog/svg-radial-gradient-focus) - [Degradado SVG en un trazado: revisa el color en la curva](https://perfectvector.com/es/blog/svg-gradient-curved-stroke.md) - [feColorMatrix en SVG: cambia colores sin modificar los rellenos](https://perfectvector.com/es/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)