SVG радиальный градиент

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

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

Элемент <radialGradient> должен быть вложен в элемент <defs> (определения). Элемент <defs> содержит определения специфических элементов (например, градиентов).

DANGER

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

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

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

html

<!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>

Try it Yourself »

Атрибуты

Атрибут	Описание
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> также поддерживает Глобальные атрибуты и Атрибуты событий.

Практика

Какие атрибуты имеет элемент 'radialGradient' в SVG?

cx, cy, r, fx, fydx, dy, ex, eyx1, y1, x2, y2spreadMethod, gradientUnits, gradientTransform

SVG радиальный градиент ​

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

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

Атрибуты ​

Практика ​

SVG радиальный градиент

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

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

Атрибуты

Практика