Элемент <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>' в этой спецификации. |
Рекомендация | Начальное определение |
Совместимость с браузером
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Особенность | Chrome | Edge | Firefox (Gecko) | IE | Opera | Safari |
|---|---|---|---|---|---|---|
| Базовая поддержка | 1.0 | (Да) | 1.5 (1.8) | 9.0 | 9.0 | 3.0.4[1] |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Базовая поддержка | 3.0 | (Да) | 1.0 (1.8) | Нет | (Да) | 3.0.4[1] |
Эти данные основаны на диаграмме.
[1] WebKit не поддерживает spreadMethod (Баг WebKit 5968) и цветовую интерполяцию (Баг WebKit 6034).