<radialGradient>
Базовая поддержка Широко доступно *
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.
* Некоторые части этой функции могут поддерживаться по-разному.
Элемент <radialGradient> SVG позволяет авторам задавать радиальные градиенты, которые можно использовать для заливки или обводки графических элементов.
Примечание: Не путайте его с CSS-свойством radial-gradient(): градиенты CSS можно применять только к элементам HTML, а градиенты SVG — только к элементам SVG.
Контекст использования
| Категории | Элемент градиента |
|---|---|
| Допустимое содержимое | Любое количество следующих элементов в любом порядке: Описательные элементы <animate>, <animateTransform>, <discard>, <script>, <set>, <stop>, <style>
|
Атрибуты
cx-
Этот атрибут задаёт координату x конечной окружности радиального градиента. Тип значения: <length>; Значение по умолчанию:
50%; Анимируемый: да cy-
Этот атрибут задаёт координату y конечной окружности радиального градиента. Тип значения: <length>; Значение по умолчанию:
50%; Анимируемый: да fr-
Этот атрибут задаёт радиус начальной окружности радиального градиента. Градиент будет нарисован так, чтобы позиция 0%
<stop>соответствовала периметру начальной окружности. Тип значения: <length>; Значение по умолчанию:0%; Анимируемый: да fx-
Этот атрибут задаёт координату x начальной окружности радиального градиента. Тип значения: <length>; Значение по умолчанию: такое же, как у
cx; Анимируемый: да fy-
Этот атрибут задаёт координату y начальной окружности радиального градиента. Тип значения: <length>; Значение по умолчанию: такое же, как у
cy; Анимируемый: да gradientUnits-
Этот атрибут задаёт систему координат для атрибутов
cx,cy,r,fx,fy,frТип значения:userSpaceOnUse|objectBoundingBox; Значение по умолчанию:objectBoundingBox; Анимируемый: да gradientTransform-
Этот атрибут задаёт дополнительное преобразование системы координат градиента. Тип значения: <transform-list>; Значение по умолчанию: тождественное преобразование; Анимируемый: да
href-
Этот атрибут задаёт ссылку на другой элемент
<radialGradient>, который будет использоваться в качестве шаблона. Тип значения: <URL>; Значение по умолчанию: отсутствует; Анимируемый: да r-
Этот атрибут задаёт радиус конечной окружности радиального градиента. Градиент будет нарисован так, чтобы позиция 100%
<stop>соответствовала периметру конечной окружности. Тип значения: <length>; Значение по умолчанию:50%; Анимируемый: да spreadMethod-
Этот атрибут указывает, как ведёт себя градиент, если его начало или конец находится внутри границ фигуры, содержащей градиент. Тип значения:
pad|reflect|repeat; Значение по умолчанию:pad; Анимируемый: да -
xlink:hrefУстарел -
Ссылка <IRI> на другой элемент
<radialGradient>, который будет использоваться в качестве шаблона. Тип значения: <IRI>; Значение по умолчанию: отсутствует; Анимируемый: да
Интерфейс DOM
Этот элемент реализует интерфейс SVGRadialGradientElement.
Пример
<svg
viewBox="0 0 10 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="myGradient">
<stop offset="10%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</radialGradient>
</defs>
<!-- using my radial gradient -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
Спецификации
Совместимость с браузерами
| Компьютеры | Мобильные устройства | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome для Android | Firefox для Android | Opera для Android | Safari для iOS | Samsung Internet | WebView для Android | WebView для iOS | |
radialGradient |
1 | 12 | 1.5 | 9 | 3 | 18 | 4 | 10.1 | 2 | 1.0 | 3 | 2 |
cx |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
cy |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
fr |
24 | 79 | 55 | 15 | 7 | 25 | 55 | 14 | 7 | 1.5 | 4.4 | 7 |
fx |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
fy |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
gradientTransform |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
gradientUnits |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
href |
50 | 12 | 51 | 37 | 12.1 | 50 | 51 | 37 | 12.2 | 5.0 | 50 | 12.2 |
r |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
spreadMethod |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
xlink_href |
1 | 79 | 1.5 | 15 | 3 | 18 | 4 | 14 | 2 | 1.0 | 4.4 | 2 |
© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/radialGradient
