CSS-свойство `stop-opacity`

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

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

Синтаксис

/* 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>, обозначающее непрозрачность элемента <stop> SVG-градиента.

<number>

Числовое значение от 0 до 1 включительно.

<percentage>

Значение в процентах от 0% до 100% включительно.

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

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

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

stop-opacity = <number> | <percentage>

Примеры

Задание непрозрачности цветовой точки 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 добавлены полосы, чтобы настройки прозрачности были заметнее.

svg {
  border: 1px solid;
  height: calc(100vh - 20px);
  margin-bottom: 10px;
  background: repeating-linear-gradient(
    to top left,
    white 0 9px,
    black 9px 10px
  );
}

polygon {
  stroke: #333333;
  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%. Обратите внимание, что во всех случаях обводка имеет одинаковый непрозрачный тёмно-серый цвет.

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

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

См. также

• Атрибут 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>