SVG fill-opacity Attribute
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:
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 400 100" <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
filter_none
Output:
Example 2:
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 400 100" <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
filter_none
Output:
