<stop>

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

Пример

html

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

Атрибуты

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

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

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

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

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

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`stop`	1	12	1.5	9	3	18	4	10.1	3	1.0	3
`offset`	1	12	1.5	9	3	18	4	10.1	3	1.0	3
`stop-color`	1	12	1.5	9	3	18	4	10.1	3	1.0	3
`stop-opacity`	1	12	1.5	9	3	18	4	10.1	143–11	1.0	3

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