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 >
|
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 >
|
Output:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...