Skip to content
Related Articles

Related Articles

Improve Article

SVG stroke-opacity attribute

  • Last Updated : 28 Oct, 2020

The stroke-opacity attribute specifies the transparency of an object or of a group of objects.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :