SVG stroke-opacity Attribute

Last Updated : 31 Mar, 2022

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>