Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!
Элемент <linearGradient> SVG позволяет авторам определять линейные градиенты для заполнения или изменения графических элементов.
Контекст использования
| Категории | Градиент |
|---|---|
| Разрешённый контент | Любое количество следующих элементов, в любом порядке: Элементы описания <animate>, <animateTransform>, <set>, <stop> |
Атрибуты
Глобальные атрибуты
Специфические атрибуты
DOM интерфейс
Этот элемент реализует SVGLinearGradientElement интерфейс.
Пример
<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="green"/>
<stop offset="95%" stop-color="gold"/>
</linearGradient>
</defs>
<rect fill="url(#MyGradient)"
x="10" y="10" width="100" height="100"/>
</svg>
| Screenshot | Live sample |
|---|---|
 |
Характеристики
| Спецификация | Статус | Комментарий |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 Определение '<linearGradient>' в этой спецификации. |
Кандидат в рекомендации | |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) Определение '<linearGradient>' в этой спецификации. |
Рекомендация | Начальное определение |
Совместимость с браузером
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
linearGradient | Chrome Полная поддержка 1 | Edge Полная поддержка Да | Firefox Полная поддержка 1.5 | IE Полная поддержка 9 | Opera Полная поддержка 9 | Safari Полная поддержка 3.1 | WebView Android Полная поддержка 3 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4 | Opera Android Полная поддержка Да | Safari iOS Полная поддержка 3.1 | Samsung Internet Android Полная поддержка 1.0 |
gradientTransform | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
gradientUnits | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
spreadMethod | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
x1 | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
x2 | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
xlink:href | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
y1 | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
y2 | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Легенда
- Полная поддержка
- Полная поддержка
- Совместимость неизвестна
- Совместимость неизвестна
- Устаревшая. Не следует использовать в новых веб-сайтах
- Устаревшая. Не следует использовать в новых веб-сайтах