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: