Related Articles

Related Articles

SVG opacity Attribute
  • Last Updated : 15 Oct, 2020

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

Syntax:

opacity= "opacity"

Attribute Values:

  • decimal: The decimal at which we want to make our element opaque

We will use the opacity attribute for setting the opacity of the element.

Example 1: In this example we will use the opacity attribute for setting the opacity of circle element.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 700 350" 
        xmlns="http://www.w3.org/2000/svg">
          
        <circle cx="50" cy="50" 
            r="40" fill="green" />
          
        <circle cx="150" cy="50" r="40" 
            fill="green" opacity="0.3" />
    </svg>
</body>
  
</html>

chevron_right


Output:

Example 2: In this example we will use the opacity attribute for setting the opacity of rectangle element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 700 350" 
        xmlns="http://www.w3.org/2000/svg">
  
        <rect height="50" width="50" 
            fill="green" opacity="0.3" />
    </svg>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :