stop-color

Свойство stop-color CSS определяет цвет, используемый для элемента SVG <stop> в градиенте. При наличии, оно переопределяет атрибут элемента stop-color.

Примечание: Свойство stop-color применяется только к элементам <stop>, вложенным в элемент <svg>. Оно не применяется к другим элементам SVG, HTML или псевдоэлементам.

Синтаксис

/* <color> values */
stop-color: red;
stop-color: hsl(120deg 75% 25% / 60%);
stop-color: currentcolor;

/* Global values */
stop-color: inherit;
stop-color: initial;
stop-color: revert;
stop-color: revert-layer;
stop-color: unset;

Значения

<color>: Цвет заливки. Может быть любым допустимым значением CSS <color>.

Формальное определение

Значение не найдено в базе данных!

Формальный синтаксис

Ошибка: не удалось найти синтаксис для этого элемента

Примеры

Определение точек цвета градиентов SVG

Этот пример демонстрирует базовое применение stop-color, и как свойство CSS stop-color имеет приоритет над атрибутом stop-color.

HTML

У нас есть SVG с тремя квадратами <rect> и тремя элементами <linearGradient>. Каждый градиент содержит четыре элемента <stop>, создавая градиенты, которые переходят от черного к белому, а затем от белого к серому; единственное различие между ними — значение id.

<svg viewBox="0 0 264 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient1">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </linearGradient>
    <linearGradient id="myGradient2">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </linearGradient>
    <linearGradient id="myGradient3">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </linearGradient>
  </defs>
  <rect x="2" y="10" width="80" height="80" fill="url('#myGradient1')" />
  <rect x="92" y="10" width="80" height="80" fill="url('#myGradient2')" />
  <rect x="182" y="10" width="80" height="80" fill="url('#myGradient3')" />
</svg>

CSS

Мы включаем обводку stroke и stroke-width прямоугольника. Мы определяем цвета первых и последних точек каждого градиента, переопределяя их значения атрибута stop-color с помощью свойства stop-color. Показаны различные синтаксисы CSS <color>.

rect {
  stroke: #333;
  stroke-width: 1px;
}

#myGradient1 {
  stop:first-of-type {
    stop-color: #66ccff;
  }
  stop:last-of-type {
    stop-color: #f4aab9;
  }
}
#myGradient2 {
  stop:first-of-type {
    stop-color: yellow;
  }
  stop:last-of-type {
    stop-color: purple;
  }
}
#myGradient3 {
  stop:first-of-type {
    stop-color: hsl(0deg 100% 50%);
  }
  stop:last-of-type {
    stop-color: hsl(20deg 100% 50%);
  }
}

Результаты

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`stop-color`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

Атрибут SVG stop-color
Свойства представления: stop-color, clip-rule, color-interpolation-filters, fill-opacity, fill-rule, fill, marker-end, marker-mid, marker-start, shape-rendering, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor и vector-effect
opacity
background-color
<color>
<basic-shape> тип данных

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