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: