Skip to content
Related Articles

Related Articles

Improve Article

SVG tableValues Attribute

  • Last Updated : 01 Dec, 2020

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-seperated 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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :