<linearGradient>

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

* Some parts of this feature may have varying levels of support.

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

Примечание:Не путайте с CSSlinear-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 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>`,`<script>`,`<set>`,`<stop>`,`<style>`