The tableValues attribute declares a list of numbers. These numbers are defining a lookup table of values for a color component transfer function. The elements that are using this attribute includes: <feFuncA>, <feFuncB>, <feFuncG>, and <feFuncR>.
Syntax:
tableValues = "list-of-numbers"
Attribute Values: The tableValues attribute accepts the values mentioned above and described below
- list-of-numbers: It holds a comma-separated or/and space-separated list of number/numbers, which declares a lookup table for the color component transfer function. Each number can be between 0 and 1.
Below examples illustrate the use of the tableValues attribute.
Example 1:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
font-size: 25px;
margin-left: 15px;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 1020 200"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient"
gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="200" y2="0">
<stop offset="0"
stop-color="green"/>
<stop offset="0.5"
stop-color="#cacfbc"/>
<stop offset="1"
stop-color="#d0d957"/>
</linearGradient>
</defs>
<filter id="geek1" x="0" y="0"
width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="table"
tableValues="0 1"/>
<feFuncG type="table"
tableValues="0 1"/>
<feFuncB type="table"
tableValues="0 1"/>
</feComponentTransfer>
</filter>
<rect x="0" y="0" width="200"
height="200" fill="url(#gradient)"
style="filter: url(#geek1);"/>
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
font-size: 25px;
margin-left: 15px;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 1020 200"
xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gradient"
gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="200" y2="0">
<stop offset="0"
stop-color="#2de00d"/>
<stop offset="0.5"
stop-color="#c5e4e6"/>
<stop offset="1"
stop-color="#cf7281"/>
</linearGradient>
</defs>
<filter id="geek2"
x="0" y="0"
width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="table"
tableValues="1 0"/>
<feFuncG type="table"
tableValues="1 0"/>
<feFuncB type="table"
tableValues="1 0"/>
</feComponentTransfer>
</filter>
<rect x="0" y="0" width="200"
height="200" fill="url(#gradient)"
style="filter: url(#geek2);"/>
</svg>
</body>
</html>
Output:
