<linearGradient>
Базовая поддержка Широко доступно *
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она поддерживается браузерами с июля 2015 года.
* Некоторые части этой функции могут поддерживаться в разной степени.
Элемент <linearGradient> SVG позволяет авторам задавать линейные градиенты для применения к другим элементам SVG.
Контекст использования
| Категории | Элемент градиента |
|---|---|
| Допустимое содержимое | Любое количество следующих элементов в любом порядке: Описательные элементы <animate>, <animateTransform>, <discard>, <script>, <set>, <stop>, <style>
|
Атрибуты
gradientUnits-
Этот атрибут задаёт систему координат для атрибутов
x1,x2,y1,y2Тип значения:userSpaceOnUse|objectBoundingBox; Значение по умолчанию:objectBoundingBox; Анимируемый: да gradientTransform-
Этот атрибут задаёт дополнительное преобразование системы координат градиента. Тип значения: <transform-list>; Значение по умолчанию: тождественное преобразование; Анимируемый: да
href-
Этот атрибут задаёт ссылку на другой элемент
<linearGradient>, который будет использоваться в качестве шаблона. Тип значения: <URL>; Значение по умолчанию: нет; Анимируемый: да spreadMethod-
Этот атрибут указывает, как ведёт себя градиент, если он начинается или заканчивается внутри границ фигуры, содержащей градиент. Тип значения:
pad|reflect|repeat; Значение по умолчанию:pad; Анимируемый: да x1-
Этот атрибут задаёт координату x начальной точки вектора градиента, вдоль которого строится линейный градиент. Тип значения: <length>; Значение по умолчанию:
0%; Анимируемый: да x2-
Этот атрибут задаёт координату x конечной точки вектора градиента, вдоль которого строится линейный градиент. Тип значения: <length>; Значение по умолчанию:
100%; Анимируемый: да -
xlink:hrefУстарело -
Ссылка <IRI> на другой элемент
<linearGradient>, который будет использоваться в качестве шаблона. Тип значения: <IRI>; Значение по умолчанию: нет; Анимируемый: да y1-
Этот атрибут задаёт координату y начальной точки вектора градиента, вдоль которого строится линейный градиент. Тип значения: <length>; Значение по умолчанию:
0%; Анимируемый: да y2-
Этот атрибут задаёт координату y конечной точки вектора градиента, вдоль которого строится линейный градиент. Тип значения: <length>; Значение по умолчанию:
0%; Анимируемый: да
Интерфейс DOM
Этот элемент реализует интерфейс SVGLinearGradientElement.
Пример
<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>
Спецификации
Совместимость с браузерами
| Компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | WebView на iOS | |
linearGradient |
1 | 12 | 1.5 | 9 | 3 | 18 | 4 | 10.1 | 2 | 1.0 | 3 | 2 |
gradientTransform |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
gradientUnits |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
href |
50 | 12 | 51 | 37 | 12.1 | 50 | 51 | 37 | 12.2 | 5.0 | 50 | 12.2 |
spreadMethod |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
x1 |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
x2 |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
xlink_href |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
y1 |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
y2 |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/linearGradient
