stroke-opacity

Базовый уровень Широко доступно

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

Атрибут stroke-opacity — это атрибут представления, задающий непрозрачность сервера отрисовки (цвета, градиента, узора и т. д.), применяемого к обводке фигуры.

Примечание: У атрибута представления stroke-opacity также есть соответствующее свойство CSS: stroke-opacity. Если заданы оба варианта, приоритет имеет свойство CSS.

Этот атрибут можно использовать со следующими элементами SVG:

Пример

<svg viewBox="0 0 40 10" xmlns="http://www.w3.org/2000/svg">
  <!-- Default stroke opacity: 1 -->
  <circle cx="5" cy="5" r="4" stroke="green" />

  <!-- Stroke opacity as a number -->
  <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" />

  <!-- Stroke opacity as a percentage -->
  <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" />

  <!-- Stroke opacity as a CSS property -->
  <circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" />
</svg>

Примечания по использованию

Значение	`[0-1]` \| <процент>
Значение по умолчанию	`1`
Анимируемый	Да

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

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

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

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

	Компьютеры					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android	WebView на iOS
`stroke-opacity`	≤80	≤80	1	≤67	≤13.1	≤80	4	≤57	≤13.4	≤13.0	≤80	≤13.4

См. также

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

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-opacity