Элемент <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>' в этой спецификации.
Рекомендация Начальное определение

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

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). 

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

Метки документа и участники

Внесли вклад в эту страницу: warsan
Обновлялась последний раз: warsan,