The stop-opacity attribute indicates the alpha value or opacity to be used at the stop point. It has effect only on the <stop> element. The default value is 1.
Syntax:
stop-opacity = opacity-value
Attribute Values: The stop-opacity attribute accepts the values mentioned above and described below
- opacity-value: It indicates a number between 0 and 1 or a percentage value.
Below examples illustrate the use of the stop-opacity attribute.
Example 1:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg width="300" height="300"
viewBox="0 0 100 100">
<defs>
<radialGradient id="gradient">
<stop offset="20%"
stop-color="gold"
stop-opacity="0.5"/>
<stop offset="80%"
stop-color="rgb(0, 0, 100)"
stop-opacity="0.6"/>
<stop offset="70%"
stop-color="rgb(100, 200, 0)"
stop-opacity="0.8"/>
</radialGradient>
</defs>
<rect x="0" y="0"
width="100%"
height="100%"
fill="url(#gradient)"
style=" stroke: black;" />
<rect x="15" y="15"
width="70%"
height="70%"
fill="url(#gradient)" />
<text fill="white"
font-size="10"
x="10" y="52">
GeeksForGeeks
</text>
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
font-size: 25px;">
GeeksforGeeks
</h1>
<svg height="200" width="200">
<defs>
<linearGradient id="gradient">
<stop offset="20%"
stop-color="rgb(20, 200, 0)"
stop-opacity="0.5"/>
<stop offset="80%"
stop-color="rgb(200, 200, 0)"
stop-opacity="0.5"/>
</linearGradient>
</defs>
<rect width="100%"
height="100%"
fill="url(#gradient)"
style=" stroke: green;"/>
<rect x="30" y="30"
width="70%"
height="70%"
fill="url(#gradient)"/>
<text fill="Green" y="100"
font-size="25">
GeeksForGeeks
</text>
</svg>
</body>
</html>
Output:
