<linearGradient>

Элемент <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>
ScreenshotLive sample

Характеристики

Спецификация Статус Комментарий
Scalable Vector Graphics (SVG) 2
Определение '<linearGradient>' в этой спецификации.
Кандидат в рекомендации  
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение '<linearGradient>' в этой спецификации.
Рекомендация Начальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
linearGradientChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка 1.5IE Полная поддержка 9Opera Полная поддержка 9Safari Полная поддержка 3.1WebView Android Полная поддержка 3Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка 3.1Samsung Internet Android ?
gradientTransformChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
gradientUnitsChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
spreadMethodChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
x1Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
x2Chrome ? 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 ?
y1Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
y2Chrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Совместимость неизвестна  
Совместимость неизвестна
Устаревшая. Не следует использовать в новых веб-сайтах
Устаревшая. Не следует использовать в новых веб-сайтах

Смотрите также