The stop-color attribute is used to indicate the color to be used at the stop point of a gradient. It only has an effect on the <stop> element. The default value of this attribute is "black".
Syntax:
stop-color = currentcolor | color | icccolor
Attribute Values: This attribute accepts the values as mentioned above and described below:
- currentcolor: It denotes the current fill color.
- color: It indicates a color value.
- icccolor: It indicates an ICC color profile.
Below examples illustrate the use of stop-color attribute.
Example 1:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 50 10"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="https://www.w3.org/1999/xlink">
<defs>
<linearGradient id="geek">
<stop offset="25%"
stop-color="lightgreen" />
<stop offset="75%"
stop-color="green" />
</linearGradient>
</defs>
<circle cx="5" cy="5" r="5"
fill="url('#geek')" />
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg height="200" width="200">
<defs>
<linearGradient id="gradient">
<stop offset="20%"
stop-color="rgb(20, 200, 0)"
stop-opacity="0.4" />
<stop offset="80%"
stop-color="rgb(200, 200, 0)"
stop-opacity="0.4" />
</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:
