Элемент <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).