stop-opacity

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

Значение свойства влияет на альфа-канал stop-color; оно может увеличить прозрачность цвета <stop>, но не может сделать цвет, определенный свойством stop-color, более непрозрачным.

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

Синтаксис

/* numeric and percentage values */
stop-opacity: 0.2;
stop-opacity: 20%;

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

Значения

Значение <opacity-value> — это <number> или <percentage>, обозначающее непрозрачность элемента градиента SVG <stop>.

<number>: Числовое значение от 0 до 1, включительно.
<percentage>: Процентное значение от 0% до 100%, включительно.

При значении 0 или 0% точка полностью прозрачна. При значении 1 или 100% элемент имеет полную непрозрачность значения stop-color, которое может быть частично прозрачным.

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

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

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

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

Примеры

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

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

HTML

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

<svg viewBox="0 0 250 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient1">
      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="myGradient2">
      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
    </linearGradient>
    <linearGradient id="myGradient3">
      <stop offset="5%" stop-color="#66ccff" stop-opacity="1" />
      <stop offset="50%" stop-color="#fefefe" stop-opacity="1" />
      <stop offset="95%" stop-color="#f4aab9" stop-opacity="1" />
    </linearGradient>
  </defs>
  <polygon points="40,10 10,100 80,40 0,40 70,100" />
  <polygon points="125,10 95,100 165,40 85,40 155,100" />
  <polygon points="210,10 180,100 250,40 170,40 240,100" />
</svg>

CSS

Мы включаем stroke и stroke-width, делая видимой линию контура многоугольника.

Каждый polygon имеет фоновый градиент, установленный с помощью свойства fill; градиент id - это параметр url().

Мы устанавливаем magenta как цвет по умолчанию.

Мы определяем непрозрачность остановок каждого градиента, используя свойство stop-opacity.

SVG имеет полосатый фон, чтобы сделать настройки прозрачности более очевидными.

polygon {
  stroke: #333;
  stroke-width: 1px;
}
polygon:nth-of-type(1) {
  fill: url("#myGradient1") magenta;
}
polygon:nth-of-type(2) {
  fill: url("#myGradient2") magenta;
}
polygon:nth-of-type(3) {
  fill: url("#myGradient3") magenta;
}

#myGradient1 stop {
  stop-opacity: 1;
}
#myGradient2 stop {
  stop-opacity: 0.8;
}
#myGradient3 stop {
  stop-opacity: 25%;
}

Результаты

Первая звезда полностью непрозрачна. Заливка второй звезды имеет 80% непрозрачности, потому что точки цвета немного полупрозрачные; stop-opacity: 0.8; переопределило значение атрибута элемента stop-opacity="1". Заливка последней звезды едва заметна с точками цвета, которые имеют 25% непрозрачности. Обратите внимание, что контур во всех случаях одинаково непрозрачный тёмно-серый.

Примечание: Поскольку мы использовали одинаковое значение stop-opacity для всех соседних элементов <stop> в линейном градиенте, мы могли бы вместо этого использовать один градиент с полностью непрозрачными точками и установить значение для каждого <polygon> свойства fill-opacity вместо этого.

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

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

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`stop-opacity`	≤80	80	≤72	67	≤13.1	80	79	57	≤13.4	13.0	80

См. также

Атрибут SVG stop-opacity
Свойства отображения: stop-opacity, clip-rule, color-interpolation-filters, fill-opacity, fill-rule, fill, marker-end, marker-mid, marker-start, shape-rendering, stop-color, 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-opacity