<stop>

Базовый уровень Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с ⁨июля 2015 года⁩.

Элемент <stop> SVG задаёт цвет и его положение для использования в градиенте. Этот элемент всегда является дочерним элементом <linearGradient> или <radialGradient>.

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

Категории	Элемент градиента
Допустимое содержимое	Любое количество следующих элементов в любом порядке: `<animate>`, `<discard>`, `<script>`, `<set>`, `<style>`

Атрибуты

offset: Этот атрибут задаёт положение контрольной точки градиента вдоль вектора градиента. Тип значения: <number> | <percentage>; Значение по умолчанию: 0; Анимируемый: да
stop-color: Этот атрибут задаёт цвет контрольной точки градиента. Его можно использовать как свойство CSS. Тип значения: <color>; Значение по умолчанию: black; Анимируемый: да
stop-opacity: Этот атрибут задаёт непрозрачность контрольной точки градиента. Его можно использовать как свойство CSS. Тип значения: <opacity-value>; Значение по умолчанию: 1; Анимируемый: да

Интерфейс DOM

Этот элемент реализует интерфейс SVGStopElement.

Пример

<svg
  viewBox="0 0 10 10"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>

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

Спецификация
Масштабируемая векторная графика (SVG) 2> # StopElement>

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari для iOS	Samsung Internet	WebView для Android	WebView для iOS
`stop`	1	12	1.5	9	3	18	4	10.1	3	1.0	3	3
`offset`	1	12	1.5	9	3	18	4	10.1	3	1.0	3	3

© 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/stop