SVG intercept Attribute
Last Updated :
31 Mar, 2022
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
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green; margin-left: 35px;">
GeeksforGeeks
</h1>
<svg viewBox="-60 0 1420 200"
<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>
|
Output:
Example 2:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green; margin-left: 35px;">
GeeksforGeeks
</h1>
<svg viewBox="-60 0 1420 200"
<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>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...