Theory
Theory
Comments

Stroke Opacity

The opacity is set using the stroke-opacity property with values ranging from 0 to 1, for example: stroke-opacity = "0.5".

Or via CSS:

rect {
  stroke-opacity: 0.5;
}

object.svg
style.css

SVG

<svg width="300" height="150"> <circle r="50" cx="75" cy="75" fill="none" stroke="darkorange" stroke-width="40"></circle> <circle r="50" cx="150" cy="75" fill="none" stroke="gold" stroke-width="40"></circle> <circle class="shape-stroke" r="50" cx="225" cy="75" fill="none" stroke="lightseagreen" stroke-width="40"></circle> </svg>

CSS

svg { border: 1px solid #dddddd; }

Goalscompleted

0

Use the attribute to assign a stroke opacity value of 0.7 to the first shape,
and then assign an opacity value of 0.6 to the second shape.
In the CSS, set the opacity of the stroke to 0.5 for the third shape.