SVG fill-opacity Attribute

Last Updated : 31 Mar, 2022

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:

html

<!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>

Output:

Example 2:

html

<!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>

Output:

HTML Introduction

taran910

Improve

Article Tags :

SVG fill-opacity Attribute

Similar Reads

Basics

HTML Structure & Elements

HTML List

HTML Visuals & Media

HTML Layout & Design

HTML Projects& Advanced Topics

HTML Tutorial References

Thank You!

What kind of Experience do you want to share?