SVG tableValues属性用法及代码示例

tableValues属性声明一个数字列表。这些数字定义了颜色分量传递函数的值的查找表。使用此属性的元素包括：<feFuncA>，<feFuncB>，<feFuncG>和<feFuncR>。

用法:

tableValues = "list-of-numbers"

属性值：tableValues属性接受上面提到和下面描述的值

list-of-numbers：它包含一个comma-seperated或/和以空格分隔的数字列表，该列表声明了颜色分量传递函数的查找表。每个数字可以在0到1之间。

以下示例说明了tableValues属性的用法。

范例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>

输出：

范例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>

输出：

相关用法

注：本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 SVG tableValues Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。