SVG радиальный градиент (radialGradient) - Учим HTML

Описание элемента `<radialGradient>`

Радиальный градиент распространяет цвета наружу от центральной точки по круговому шаблону — как круги на воде от брошенного камня. Элемент <radialGradient> задаёт такой градиент, который можно применять для заливки и обводки графических элементов.

Эта страница объясняет, чем радиальный градиент отличается от линейного, как задавать цветовые стопы и как атрибуты gradientUnits и spreadMethod влияют на результат. Если вы только начинаете знакомство с SVG, сначала прочитайте введение в SVG.

Элемент <radialGradient> должен находиться внутри элемента <defs>, что расшифровывается как definitions (определения). Элемент <defs> хранит повторно используемые определения (например, градиенты), которые сами по себе не отображаются — они используются другими элементами по ссылке. Чтобы применить градиент, нужно присвоить <radialGradient> атрибут id и затем сослаться на него через fill="url(#id)" (или stroke="url(#id)").

Как определяется радиальный градиент

Именно это отличает радиальный градиент от линейного. Радиальный градиент определяется двумя окружностями:

Конечная окружность задаётся атрибутами cx, cy (её центр) и r (её радиус). Градиент завершается — достигает последнего цветового стопа — на краю этой окружности.
Фокусная точка задаётся атрибутами fx, fy. Именно здесь градиент начинается (первый цветовой стоп). Градиент расходится наружу от фокусной точки до конечной окружности.

Когда fx/fy совпадают с cx/cy, градиент получается идеально концентрическим. Если сдвинуть фокусную точку от центра, градиент будет смещённым — это удобно для имитации источника света или блика на трёхмерной сфере. Если опустить fx/fy, они по умолчанию принимают значения cx/cy.

Цветовые стопы

Цвета градиента описываются одним или несколькими элементами <stop>, вложенными в <radialGradient>. Каждый стоп имеет следующие атрибуты:

offset — позиция стопа вдоль градиента: от 0% (фокусная точка) до 100% (край конечной окружности). Можно также использовать число от 0 до 1.
stop-color — цвет в данной позиции (любое значение цвета CSS).
stop-opacity — непрозрачность в данной позиции: от 0 (прозрачный) до 1 (непрозрачный).

Опасно

Не путайте SVG радиальный градиент с функцией CSS radial-gradient. CSS-градиенты можно применять к фону любого элемента, тогда как SVG-градиенты применяются только к SVG-элементам.

Пример элемента SVG `<radialGradient>`:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <radialGradient id="example" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
          <!-- Center: transparent -->
          <stop offset="0%" stop-color="rgb(245,245,245)" stop-opacity="0" />
          <!-- Edge: solid light green -->
          <stop offset="100%" stop-color="rgb(144, 238, 144)" stop-opacity="1" />
        </radialGradient>
      </defs>
      <ellipse cx="250" cy="100" rx="95" ry="65" fill="url(#example)" /> Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Попробуйте сами »

Пример со смещённой фокусной точкой

Перемещение fx/fy относительно cx/cy изменяет начало градиента. Здесь фокусная точка смещена в сторону верхнего левого угла окружности, что придаёт фигуре вид освещённой сферы — блик находится вблизи фокусной точки, а цвет темнеет к краю конечной окружности:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="300">
      <defs>
        <!-- End circle centered at 50%/50%; focal point shifted to 35%/35% -->
        <radialGradient id="sphere" cx="50%" cy="50%" r="50%" fx="35%" fy="35%">
          <stop offset="0%" stop-color="rgb(255, 255, 255)" />
          <stop offset="100%" stop-color="rgb(30, 80, 200)" />
        </radialGradient>
      </defs>
      <circle cx="200" cy="150" r="120" fill="url(#sphere)" />
    </svg>
  </body>
</html>

Управление единицами измерения с помощью `gradientUnits`

Атрибут gradientUnits определяет, в какой системе координат измеряются cx, cy, r, fx и fy:

objectBoundingBox (по умолчанию) — координаты задаются относительно ограничивающего прямоугольника заполняемого элемента. Используйте проценты или дроби (от 0 до 1), где 50% означает центр фигуры. Градиент автоматически масштабируется вместе с фигурой.
userSpaceOnUse — координаты используют собственную пользовательскую систему координат SVG-холста (те же единицы, что и у фигур). Используйте абсолютные значения, например cx="200". Это удобно, когда один градиент должен совместно использоваться несколькими фигурами в фиксированной позиции.

<svg width="400" height="300">
  <defs>
    <radialGradient id="abs" gradientUnits="userSpaceOnUse"
                    cx="200" cy="150" r="120" fx="200" fy="150">
      <stop offset="0%" stop-color="orange" />
      <stop offset="100%" stop-color="purple" />
    </radialGradient>
  </defs>
  <rect x="80" y="30" width="240" height="240" fill="url(#abs)" />
</svg>

Управление краями с помощью `spreadMethod`

spreadMethod определяет, что происходит за пределами конечной окружности, когда градиент не покрывает всю фигуру (например, когда r меньше размера фигуры или фокусная точка смещена):

pad (по умолчанию) — последний цветовой стоп продолжается как сплошная заливка до краёв.
reflect — градиент отражается зеркально, повторяясь наружу по схеме ...край → центр → край → центр...
repeat — градиент каждый раз начинается заново, повторяясь наружу по схеме ...центр → край, центр → край...

<svg width="400" height="150">
  <defs>
    <radialGradient id="rings" cx="50%" cy="50%" r="20%" spreadMethod="repeat">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="teal" />
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="400" height="150" fill="url(#rings)" />
</svg>

Атрибуты

Атрибут	Описание
cx	Задаёт координату x центра конечной окружности градиента.
cy	Задаёт координату y центра конечной окружности градиента.
r	Задаёт радиус конечной окружности градиента.
fx	Задаёт координату x фокусной точки (начала) градиента.
fy	Задаёт координату y фокусной точки (начала) градиента.
gradientUnits	Задаёт систему координат для `cx`, `cy`, `r`, `fx` и `fy`. Значения: `objectBoundingBox` (по умолчанию) или `userSpaceOnUse`.
gradientTransform	Задаёт дополнительное преобразование системы координат градиента.
href	URL-ссылка на другой элемент "radialGradient" или "linearGradient".
spreadMethod	Задаёт поведение градиента, когда он начинается или заканчивается внутри границ содержащего его объекта. Значения: `pad`, `repeat` или `reflect`.

Элемент SVG <radialGradient> также поддерживает глобальные атрибуты и атрибуты событий.

Связанные разделы

SVG линейный градиент — другой тип градиента, определяемый направлением, а не двумя окружностями.
Введение в SVG — основы работы с SVG в HTML.
Справочник SVG — полный список SVG-элементов и атрибутов.

Практика

Какие атрибуты определяют фокусную точку (начало) SVG радиального градиента?

fx, fycx, cyx1, y1dx, dy

Описание элемента <radialGradient>