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: