SVG stop-color Attribute
Last Updated :
31 Mar, 2022
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:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 50 10"
<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:
HTML
<!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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...