<radialGradient>

Элемент <radialGradient> позволяет авторам определять радиальные градиенты, которые могут применяться для заливки или обводки графических элементов.

Примечание: Не путайте с CSS radial-gradient(), так как CSS-градиенты могут применяться только к HTML-элементам, а SVG-градиенты — только к SVG-элементам.

Пример

html

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

Атрибуты

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> ; Значение по умолчанию: нет; Анимируемый: да

Контекст использования

Категории	Элемент градиента
Разрешённое содержимое	Любое количество следующих элементов в любом порядке: Описание элементов `<animate>`, `<animateTransform>`, `<set>`, `<stop>`

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # RadialGradients

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`radialGradient`	1	12	1.5	9	3	18	4	10.1	2	1.0	3
`cx`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`cy`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`fr`	24	79	55	15	7	25	55	14	7	1.5	4.4
`fx`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`fy`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`gradientTransform`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`gradientUnits`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`href`	50	12	51	37	12.1	50	51	37	12.2	5.0	50
`r`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`spreadMethod`	1	79	1.5	15	3	18	4	14	2	1.0	4.4
`xlink_href`	1	79	1.5	15	3	18	4	14	2	1.0	4.4

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient