Skip to content
Related Articles

Related Articles

SVG intercept Attribute
  • Last Updated : 16 Dec, 2020

The intercept attribute is used to specify the intercept of the color component’s linear function. It should be noted that the type attribute is set to linear. The elements that are using this attribute includes: <feFuncA>, <feFuncB>, <feFuncG>, and <feFuncR>.

Syntax:

intercept = "number"

Attribute Values: The intercept attribute accepts the values mentioned above and described below

  • number: This defines either an integer or a number with some fractional component.

Note: The default value for the intercept attribute is 0.

Below Examples illustrates the use of intercept attribute.

Example 1:



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; margin-left: 35px;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="-60 0 1420 200" 
        xmlns="http://www.w3.org/2000/svg">
          
        <defs>
            <linearGradient id="geeky" 
                gradientUnits="userSpaceOnUse" 
                x1="0" y1="0" x2="200" y2="0">
                  
                <stop offset="0" stop-color="#00ff00" />
                <stop offset="0.5" stop-color="yellow" />
                <stop offset="1" stop-color="darkgreen" />
            </linearGradient>
        </defs>
  
        <filter id="geek1" width="100%" height="100%">
            <feComponentTransfer>
                <feFuncR type="linear" intercept="0" />
                <feFuncG type="linear" intercept="0" />
                <feFuncB type="linear" intercept="0" />
            </feComponentTransfer>
        </filter>
  
        <rect width="200" height="200" 
            fill="url(#geeky)" 
            style="filter:url(#geek1);" />
    </svg>
</body>
  
</html>

chevron_right


Output:

Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; margin-left: 35px;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="-60 0 1420 200" 
        xmlns="http://www.w3.org/2000/svg">
          
        <defs>
            <linearGradient id="geeky" 
                gradientUnits="userSpaceOnUse" 
                x1="0" y1="0" x2="200" y2="0">
                  
                <stop offset="0" stop-color="green" />
                <stop offset="0.5" stop-color="#FDBF2D" />
                <stop offset="1" stop-color="#FF0000" />
            </linearGradient>
        </defs>
  
        <filter id="geek2" width="100%" height="100%">
            <feComponentTransfer>
                <feFuncR type="linear" intercept="0.1" />
                <feFuncG type="linear" intercept="0.1" />
                <feFuncB type="linear" intercept="0.1" />
            </feComponentTransfer>
        </filter>
  
        <rect width="200" height="200" 
            fill="url(#geeky)" 
            style="filter: url(#geek2);" />
    </svg>
</body>
  
</html>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :