<linearGradient>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

<linearGradient> позволяет определять линейные градиенты для заполнения или изменения графических элементов.

Примечание: Не путайте с CSS linear-gradient(), CSS-градиенты могут быть применены только к HTML-элементам, тогда как SVG-градиент применим только к SVG-элементам.

Пример

html,
body,
svg {
  height: 100%;
}

html

<svg
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

Атрибуты

gradientUnits: Определяет систему координат для атрибутов x1, x2, y1, y2 Тип значения: userSpaceOnUse|objectBoundingBox ; Значение по умолчанию: objectBoundingBox; Анимируемый: да
gradientTransform: Этот атрибут обеспечивает дополнительное преобразование для системы координат градиента. Тип значения: <transform-list> ; Значение по умолчанию: identity transform; Анимируемый: да
href: Этот атрибут определяет ссылку на другой элемент <linearGradient>, который будет использоваться в качестве шаблона. Тип значения: <URL> ; Значение по умолчанию: none; Анимируемый: да
spreadMethod: Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент. Тип значения: pad|reflect|repeat ; Значение по умолчанию: pad; Анимируемый: да
x1: Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да
x2: Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> ; Значение по умолчанию: 100%; Анимируемый: да
xlink:href: Устарело: Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.
<IRI> ссылка на другой <linearGradient> элемент, который будет использоваться в качестве шаблона. Тип значения: <IRI> ; Значение по умолчанию: none; Анимируемый: да
y1: Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да
y2: Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент. Тип значения: <length> ; Значение по умолчанию: 0%; Анимируемый: да

Примечания по использованию

Категории	Элемент градиента
Разрешённый контент	Любое количество следующих элементов, в любом порядке: Элементы описания `<animate>`, `<animateTransform>`, `<set>`, `<stop>`

Спецификации

Specification
Scalable Vector Graphics (SVG) 2 # LinearGradients

Совместимость с браузерами

BCD tables only load in the browser