Skip to content
Related Articles

Related Articles

SVG stop-color Attribute
  • Last Updated : 27 Nov, 2020

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" 
        xmlns="http://www.w3.org/2000/svg" 
        xmlns:xlink="http://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:

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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :