> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Радиальные градиенты SVG: переместите блик с fx и fy

> Переместите блик радиального градиента SVG с fx и fy, сравните круглую и эллиптическую заливку и сохраните контур эмблемы и прозрачное отверстие неизменными.

Source: https://perfectvector.com/ru/blog/svg-radial-gradient-focus

Language: ru
Author: Irene Kim
Published: 2026-10-02T08:00:00+09:00
Updated: 2026-10-02T08:00:00+09:00

Чтобы переместить блик радиального градиента SVG, не перемещая графику, задайте `fx` и `fy` у `<radialGradient>`. Не меняйте `cx`, `cy`, `r` и контур. При `fr="0"` фокусная точка начинает цветовой переход, а конечная окружность по-прежнему задаёт его внешний охват. Если блик выглядит растянутым, перед правкой контура проверьте `gradientUnits` и ограничивающий прямоугольник фигуры.

В этом разборе используется оригинальная широкая шестиугольная эмблема с отверстием. Мы сравниваем центральный и смещённый блики, затем два выбранных определения заливки: эллипс относительно объекта и окружность в пользовательском пространстве. SVG создан непосредственно кодом. Ни сервис трассировки, ни редактор не создавали этот образец.

## Отделите фокус от конечной окружности

У радиального градиента есть начальная и конечная окружности. В этом стартовом примере `fr="0"` уменьшает начальную окружность до точки. `fx` и `fy` задают её положение, а `cx`, `cy` и `r` определяют конечную окружность. Если фокусные координаты не заданы, они получают соответствующие координаты центра по умолчанию. Эти атрибуты и значения описаны в [справочнике MDN по radialGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient).

Рассматривайте эти правки как разные задачи:

| Нужное изменение                                    | Что менять                                       | Что фиксировать для сравнения                           |
| --------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
| Переместить самую светлую область влево вверх       | `fx` и `fy`                                      | Координаты конечной окружности, цветовые точки и контур |
| Переместить всю область заливки                     | `cx` и `cy` с проверкой явных фокусных координат | Контур                                                  |
| Изменить охват заливки                              | `r`                                              | Центр, фокус и контур                                   |
| Сохранить круглую область заливки на широкой фигуре | Выбрать пользовательские координаты              | Проверить все координаты и радиус                       |

Горизонтальная фокусная координата — [`fx`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx), вертикальная — [`fy`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy). Изменение обеих перемещает начальную точку по диагонали. Оно не меняет точки контура и не двигает отверстие.

## Скопируйте полный SVG со смещённым бликом

Сохраните это как `emblem.svg` и откройте в браузере. Файл не зависит от внешних изображений или таблиц стилей.

```svg
<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>
```

Для центрального контрольного образца измените только `fx=".22" fy=".18"` на `fx=".5" fy=".5"`. Не меняйте остальные атрибуты и оба очертания в `d`.

Внешний контур занимает от `x=0` до `160` и от `y=20` до `100`. Второй контур определяет отверстие. `fill-rule="evenodd"` оставляет его незакрашенным; перемещение градиента не заполняет отверстие. [Справочник MDN по fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) объясняет правило пересечений для этого составного контура.

Центральный фокус находится в отверстии, поэтому сама самая яркая точка невидима. На кольце всё ещё виден окружающий цветовой переход. Смещённый фокус попадает на сплошную верхнюю левую полосу, где становится видна самая светлая цветовая точка. Это различие помогает, если правка координат будто мало что меняет: фокус может находиться за прозрачной частью знака.

## Почему широкая эмблема получает эллиптический переход

При `gradientUnits="objectBoundingBox"` координаты описывают границы закрашиваемого объекта. Границы нашей эмблемы — `160 × 80`, хотя холст SVG имеет размер `200 × 120`. Нормализованная окружность отображается через этот неквадратный прямоугольник в эллипс. Это отображение описано в [справочнике MDN по gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits).

Здесь `cx=".5" cy=".5"` отображается в `(80, 60)`. Радиус `.6` даёт горизонтальный и вертикальный радиусы `96` и `48`. Смещённый фокус отображается так:

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

Для круглой конечной области в этом SVG без преобразований замените координатные атрибуты градиента на:

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

Центральный контроль использует `fx="80" fy="60"`. Радиус теперь равен `64` пользовательским единицам в обоих направлениях. Это другая выбранная конечная область относительно эллипса `96 × 48`. Мы изменили определение координат и физический радиус; это сравнение не изолирует переключение единиц. Внутри каждой центральной/смещённой пары меняются только фокусные координаты.

Используйте заливку относительно объекта, если переход должен следовать пропорциям каждой фигуры. Используйте явные числа пользовательского пространства, если положение и круглый охват относятся к координатам графики. Для перехода, общего для отдельных контуров логотипа, см. [единицы градиента SVG](https://perfectvector.com/ru/blog/svg-gradient-units).

## Что показало исходное браузерное сравнение

Мы открыли все четыре созданных SVG в Chrome и показали каждый при `100 × 60` и `300 × 180` CSS-пикселях. Большая версия облегчала проверку верхнего левого блика. То же смещение оставалось видимым в меньшем размере, а отверстие сохраняло прозрачность в каждом образце.

Отчёт браузера об исходнике нашёл один контур, отсутствие элементов image, одинаковые значения `d` и те же границы контура `160 × 80` во всех четырёх файлах. Отдельное считывание пикселей в исходном размере холста подтвердило изменение заливки:

| Определение заливки                        | Фокус       | Верхний левый образец RGBA | Альфа отверстия |
| ------------------------------------------ | ----------- | -------------------------- | --------------- |
| Границы объекта, радиус `.6`               | Центральный | `164, 77, 84, 255`         | `0`             |
| Границы объекта, радиус `.6`               | Смещённый   | `246, 184, 155, 255`       | `0`             |
| Пользовательское пространство, радиус `64` | Центральный | `149, 67, 82, 255`         | `0`             |
| Пользовательское пространство, радиус `64` | Смещённый   | `248, 196, 168, 255`       | `0`             |

Верхний левый образец находится в координате графики `(35, 30)`, а образец отверстия — в `(80, 60)`. Эти наблюдения описывают данный исходник и сеанс браузера. Они не устанавливают вывод другого средства отрисовки или поведение импорта редактором.

**Фокус и границы заливки**

![Концептуальная иллюстрация сравнения положений блика на эмблемах с направляющими границ заливки.](https://perfectvector.com/blog/svg-radial-gradient-focus/focus-and-bounds.webp)

*Иллюстрация: блик может перемещаться внутри неизменного контура. Направляющие объясняют геометрию заливки; это не браузерный образец и не результат трассировки.*

## Держите фокус внутри при настройке знака

Начните с внутреннего фокуса и `fr="0"`. В нормализованных координатах расстояние смещённого фокуса от центра примерно `.425`, что меньше нашего радиуса `.6`. В пользовательской версии расстояние примерно `51.6`, что меньше `64`. Оба выбора держат начальную точку внутри конечной окружности в системе координат, где эта окружность определена.

Старые объяснения могут говорить, что внешний фокус всегда прижимается к конечной окружности. SVG 2 допускает расположение начальной окружности снаружи и определяет другое поведение, включая незакрашенные области за конусом градиента. Это изменение объясняет [спецификация радиальных градиентов SVG 2](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients). Стартовый пример использует внутренние точки; мы не проверяли отрисовку внешнего фокуса в разных браузерах.

Сохраняйте `spreadMethod="pad"` при проверке положения. За пределами градиента `pad` использует цвет последней цветовой точки; `repeat` и `reflect` вводят повторение, которое может мешать сравнению фокуса. Эти варианты определены в [справочнике MDN по spreadMethod](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod).

Перед передачей проверьте три вещи в среде, где будет показываться SVG:

1. Блик находится на нужной сплошной полосе в реальном размере показа.
2. Отверстие остаётся прозрачным, а данные контура всё ещё совпадают с мастером.
3. Выбранная окружность или эллипс подходит пропорциям знака.

Если после экспорта цвета меняются, проверьте заливку и контекст передачи по статье [почему цвета SVG меняются после экспорта](https://perfectvector.com/ru/blog/why-svg-colors-change-after-export). Перемещение фокуса — правка положения, поэтому одновременная смена цветов точек усложняет понимание сравнения.

## Отделите восстановление геометрии от дизайна заливки

Сохраните плоский мастер этой эмблемы, используя тот же контур со сплошной заливкой и сохраняя отверстие. Градиентную версию храните отдельно для веб-графики, которой она нужна. Градиент — окрашивание, назначенное контуру; эти фокусные координаты не определяют дополнительные линии резки.

Если исходный логотип существует только в PNG или JPG, [векторизатор логотипов PerfectVector](https://perfectvector.com/ru/vectorize-logo) может восстановить векторную геометрию для проверки перед перестроением этой заливки. Проверьте внешний контур и отверстие, затем задайте координаты градиента в SVG-процессе. Растровый блик не сохраняет исходные `fx`, `fy` или радиус как восстанавливаемые параметры дизайна. Если чистые векторные контуры уже есть, редактируйте их градиент напрямую. [Руководство по векторизации градиентов](https://perfectvector.com/ru/blog/vectorize-gradients) описывает решение о переходе от растра к вектору.

## Частые вопросы

**Как переместить блик радиального градиента SVG?**
Задайте явные координаты fx и fy у radialGradient. При сравнении изменения фиксируйте cx, cy, r, цветовые точки и контур. При нулевом fr эти фокусные координаты задают начальную точку цветового перехода.

**Почему радиальный градиент в моём SVG выглядит эллиптическим?**
В единицах objectBoundingBox нормализованная окружность отображается через границы закрашиваемого объекта. Неквадратные границы дают эллипс. В SVG без преобразований явные координаты userSpaceOnUse могут задать круглую область в единицах графики.

**Заполнит ли перемещение фокуса отверстие логотипа?**
Нет. Отверстие определяется составным контуром и правилом заливки. Этот пример использует evenodd и сохраняет один контур во всех образцах; при перемещении фокуса отверстие остаётся прозрачным.

**Может ли векторизация восстановить исходные фокусные координаты градиента?**
Растровое изображение не хранит исходные параметры градиента SVG. При необходимости восстановите и проверьте контуры, затем перестройте заливку и проверьте блик в целевой среде показа.

## Источники

1. [MDN radialGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient) — Атрибуты начальной/конечной окружности и значения по умолчанию.
2. [MDN fx](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fx) — Значение горизонтальной фокусной координаты.
3. [MDN fy](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fy) — Значение вертикальной фокусной координаты.
4. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Чётно-нечётное поведение заливки отверстия.
5. [MDN gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Границы объекта, пользовательское пространство и эллиптическое отображение.
6. [Радиальные градиенты SVG 2](https://www.w3.org/TR/SVG2/pservers.html#RadialGradients) — Геометрия начальной окружности и изменение спецификации внешнего фокуса.
7. [MDN spreadMethod](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/spreadMethod) — Поведение pad, repeat и reflect.

## Explore

- [Read the HTML article](https://perfectvector.com/ru/blog/svg-radial-gradient-focus)
- [Градиент SVG вдоль контура: проверьте цвет на изгибе](https://perfectvector.com/ru/blog/svg-gradient-curved-stroke.md)
- [SVG feColorMatrix: смена цвета без изменения заливок](https://perfectvector.com/ru/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)