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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。