stroke-opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

The stroke-opacity attribute is a presentation attribute defining the opacity of the paint server (color, gradient, pattern, etc.) applied to the stroke of a shape.

Note: As a presentation attribute stroke-opacity can be used as a CSS property. See stroke-opacity for more.

You can use this attribute with the following SVG elements:

Example

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>

Usage notes

Value [0-1] | <percentage>
Default value 1
Animatable Yes

It's important to know that the stroke partially covers the fill of a shape, so a stroke with an opacity different than 1 will partially show the fill underneath. To avoid this effect, it is possible to apply a global opacity with the opacity attribute or to put the stroke behind the fill with the paint-order attribute.

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# StrokeOpacity

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stroke-opacity

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also