<linearGradient>
================

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

**Примечание:** Не путайте с CSS `linear-gradient()` (en-US), 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 (en-US)`

 Определяет систему координат для атрибутов `x1`, `x2`, `y1`, `y2`
*Тип значения*: `userSpaceOnUse`|`objectBoundingBox` ; *Значение по умолчанию*: `objectBoundingBox`; *Анимируемый*: **да**

`gradientTransform (en-US)`

 Этот атрибут обеспечивает дополнительное преобразование для системы координат градиента.
 *Тип значения*: **<transform-list> (en-US)** ; *Значение по умолчанию*: *identity transform*; *Анимируемый*: **да**

`href (en-US)`

 Этот атрибут определяет ссылку на другой элемент `<linearGradient>`, который будет использоваться в качестве шаблона.
 *Тип значения*: **<URL>** (en-US) ; *Значение по умолчанию*: none; *Анимируемый*: **да**

`spreadMethod (en-US)`

 Этот атрибут указывает, как ведет себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент.
 *Тип значения*: `pad`|`reflect`|`repeat` ; *Значение по умолчанию*: `pad`; *Анимируемый*: **да**

`x1 (en-US)`

 Этот атрибут определяет координату x начальной точки векторного градиента, вдоль которой рисуется линейный градиент.
 *Тип значения*: **<length>** (en-US) ; *Значение по умолчанию*: `0%`; *Анимируемый*: **да**

`x2 (en-US)`

 Этот атрибут определяет координату x конечной точки векторного градиента, вдоль которой рисуется линейный градиент.
 *Тип значения*: **<length>** (en-US) ; *Значение по умолчанию*: `100%`; *Анимируемый*: **да**

`xlink:href (en-US)`

**Устарело:** Эта возможность была удалена из веб-стандартов. Хотя некоторые браузеры по-прежнему могут поддерживать её, она находится в процессе удаления. Не используйте её ни в старых, ни в новых проектах. Страницы или веб-приложения, использующие её, могут в любой момент сломаться.

<IRI> (en-US) ссылка на другой `<linearGradient>` элемент, который будет использоваться в качестве шаблона.
 *Тип значения*: **<IRI>** (en-US) ; *Значение по умолчанию*: none; *Анимируемый*: **да**

`y1 (en-US)`

 Этот атрибут определяет координату y начальной точки векторного градиента, вдоль которой рисуется линейный градиент.
 *Тип значения*: **<length>** (en-US) ; *Значение по умолчанию*: `0%`; *Анимируемый*: **да**

`y2 (en-US)`

 Этот атрибут определяет координату y конечной точки векторного градиента, вдоль которой рисуется линейный градиент.
 *Тип значения*: **<length>** (en-US) ; *Значение по умолчанию*: `0%`; *Анимируемый*: **да**

### Глобальные атрибуты

Основные атрибуты

Прежде всего: `id`

Атрибуты стилизации (en-US)
`class`, `style (en-US)`
Атрибуты событий

Глобальные атрибуты событий (en-US), Атрибуты событий элементов документа (en-US)

Атрибуты презентации (en-US)

Прежде всего: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

XLink атрибуты
`xlink:href (en-US)`, `xlink:title (en-US)`
Примечания по использованию
---------------------------

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LinearGradients |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.