The stroke-opacity attribute specifies the transparency of an object or of a group of objects.
Syntax:
stroke-opacity= "opacity"
Attribute Values:
- decimal: decimal value ranging from 0-1
- percentage: percentage at which we want to set the opacity of the element
We will use the stoke-opacity attribute for setting the opacity of the element.
Example 1: In this example we will use the stroke-opacity attribute for setting the opacity of circle element using decimal attribute.
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 40 10"
xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="4" stroke="green" />
<circle cx="15" cy="5" r="4" stroke="green"
stroke-opacity="0.7" />
</svg>
</body>
</html>
Output:
Example 2: In this example we will use the stroke-opacity attribute for setting the opacity of circle element using percentage attribute.
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 40 35"
xmlns="http://www.w3.org/2000/svg">
<circle cx="5" cy="5" r="3" stroke="green" />
<circle cx="15" cy="5" r="3" stroke="green"
stroke-opacity="50%" />
</svg>
</body>
</html>
Output:
