Related Articles

Related Articles

SVG fill-opacity Attribute
  • Last Updated : 27 Oct, 2020

The fill-opacity attribute is a presentation attribute defining the opacity of the paint applied to a shape.

Syntax:

fill-opacity="colour"

Attribute Values:

  • decimal: Decimal value at which we want to make our element opaque.
  • percentage: Percentage at which we want to set the fill-opacity attribute.

We will use the fill-opacity attribute for setting the opacity of fill-color.

Example 1: 



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<body
    <svg viewBox="0 0 400 100" 
         xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="35" fill="green"/>
  
        <circle cx="150" cy="50" r="35" fill="green"
        fill-opacity="0.7" />
    </svg>
</body
  
</html>

chevron_right


Output:

Example 2: 

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<body
    <svg viewBox="0 0 400 100"
        xmlns="http://www.w3.org/2000/svg">
        <circle cx="60" cy="60" r="40" fill="black"/>
  
        <circle cx="150" cy="60" r="40" fill="black"
        fill-opacity="25%" />
    </svg>
</body
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :