stroke-opacity

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

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

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

Пример

html

<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`
Анимируемо	Да

Примечание: SVG2 вводит процентные значения для stroke-opacity, однако, поддержка пока не повсеместна (см. Совместимость с браузерами ниже). Поэтому рекомендуется устанавливать непрозрачность с помощью значения в диапазоне [0-1].

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

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for 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/SVG/Attribute/stroke-opacity