Свойство CSS `stroke-opacity`

Свойство stroke-opacity CSS определяет непрозрачность обводки фигуры SVG. Эффект идентичен эффекту свойства opacity, но применяется только к обводке, а не ко всему элементу. Если оно задано, то переопределяет атрибут элемента stroke-opacity.

Это свойство применяется к фигурам SVG и элементам, содержащим текст (полный список см. в описании stroke-opacity), но, поскольку это наследуемое свойство, его можно применить к таким элементам, как <g>, и оно по-прежнему будет оказывать нужное воздействие на обводки дочерних элементов.

Обратите внимание, что обводка фигуры частично перекрывает её заливку, поэтому обводка с непрозрачностью меньше 1 позволяет видеть смешение заливки и обводки в местах их наложения. Чтобы избежать этого эффекта, можно задать общую непрозрачность с помощью свойства opacity или поместить обводку позади заливки с помощью атрибута paint-order.

Синтаксис

/* numeric and percentage values */
stroke-opacity: 1;
stroke-opacity: 0.3;
stroke-opacity: 50%;

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

Значения

<number>

Любое действительное число от 0 до 1 включительно. Значение 0 делает обводку полностью прозрачной, а значение 1 — полностью непрозрачной. Значения вне диапазона 0–1 ограничиваются ближайшей границей этого диапазона; таким образом, отрицательные значения ограничиваются значением 0.

<percentage>

То же, что и <number> (см. выше), но допустимый диапазон составляет от 0% до 100%, и ограничение применяется с учётом этого диапазона.

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

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

stroke-opacity = 
  <'opacity'>

Примеры

Различные значения непрозрачности обводки

В этом примере показано базовое использование свойства stroke-opacity и то, как обводка с непрозрачностью меньше 1 смешивается с заливкой в местах их наложения, поскольку обводка фигуры частично перекрывает её заливку.

HTML

Сначала создадим пять многоsegmentных контуров, каждый из которых использует чёрную обводку шириной в одну единицу и заливку dodgerblue для подпутей. Каждый контур образует ряд символов гор, от пологого угла слева до острого угла справа.

<svg viewBox="0 0 39 36" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" stroke-width="1" fill="dodgerblue">
    <path
      d="M1,5 l7   ,-3 l7   ,3
         m2,0 l3.5 ,-3 l3.5 ,3
         m2,0 l2   ,-3 l2   ,3
         m2,0 l0.75,-3 l0.75,3
         m2,0 l0.5 ,-3 l0.5 ,3" />
    <path
      d="M1,12 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,19 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,26 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
    <path
      d="M1,33 l7,-3 l7,3 m2,0 l3.5,-3 l3.5,3 m2,0 l2,-3 l2,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5,-3 l0.5,3" />
  </g>
</svg>

CSS

Для этих контуров зададим последовательно возрастающие значения непрозрачности обводки. У первых четырёх контуров заливку можно видеть сквозь внутреннюю половину обводки, хотя на четвёртом контуре это может быть трудно различить. У пятого, последнего контура обводка полностью непрозрачна, поэтому заливку сквозь неё не видно.

g path:nth-child(1) {
  stroke-opacity: 0.2;
} /* equiv. 20% */
g path:nth-child(2) {
  stroke-opacity: 0.4;
} /* equiv. 40% */
g path:nth-child(3) {
  stroke-opacity: 0.6;
} /* equiv. 60% */
g path:nth-child(4) {
  stroke-opacity: 0.8;
} /* equiv. 80% */
g path:nth-child(5) {
  stroke-opacity: 1;
} /* equiv. 100% */

Результаты

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

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

См. также

• opacity
• fill-opacity
• paint-order
• stroke
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-linejoin
• stroke-miterlimit
• stroke-width
• Атрибут SVG stroke-opacity