stroke-opacity

Базовая Широкодоступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2020 года.

Свойство 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% и усечение выполняется с учётом этого диапазона.

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

Начальное значение	`1`
Применяется к	`<circle>`, `<ellipse>`, `<line>`, `<path>`, `<polygon>`, `<polyline>` и `<rect>` элементы в `svg`
Наследуется	да
Вычисленное значение	указанное значение, усеченное в диапазоне `[0,1]`
Тип анимации	по типу вычисленного значения

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

stroke-opacity = 
  <'opacity'>  

<opacity> = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>

Примеры

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

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

HTML

Сначала мы создаем пять многосегментных путей, все из которых используют черную обводку шириной один и 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% */

Результаты

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

Спецификация
CSS Fill and Stroke Module Level 3 # stroke-opacity

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

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

См. также

© 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/stroke-opacity