Элемент <radialGradient> SVG позволяет авторам определять радиальные градиенты для заполнения или изменения графических элементов.
Контекст использования
| Категории | Градиент |
|---|---|
| Разрешённый контент | Любое количество следующих элементов, в любом порядке: Элементы описания <animate>, <animateTransform>, <set>, <stop> |
Атрибуты
Глобальные атрибуты
Специфические атрибуты
DOM интерфейс
Этот элемент реализует SVGRadialGradientElement интерфейс.
Пример
SVG
<svg width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="exampleGradient">
<stop offset="10%" stop-color="gold"/>
<stop offset="95%" stop-color="green"/>
</radialGradient>
</defs>
<circle fill="url(#exampleGradient)" cx="60" cy="60" r="50"/>
</svg>
Результат
Характеристики
| Спецификация | Статус | Коммент |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 Определение '<radialGradient>' в этой спецификации. |
Кандидат в рекомендации | Добавлен атрибут fr |
| Scalable Vector Graphics (SVG) 1.1 (Second Edition) Определение '<radialGradient>' в этой спецификации. |
Рекомендация | Начальное определение |
Совместимость с браузером
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!
| Feature | Chrome | Edge | Firefox (Gecko) | IE | Opera | Safari |
|---|---|---|---|---|---|---|
| Базовая поддержка | 1.0 | (Да) | 1.5 (1.8) | 9.0 | 9.0 | 3.0.4[1] |
| Особенность | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Базовая поддержка | 3.0 | (Да) | 1.0 (1.8) | Нет | (Да) | 3.0.4[1] |
Эти данные основаны на диаграмме.
[1] WebKit не поддерживает цветовую интерполяцию (Баг WebKit 6034).