SVG intercept屬性用法及代碼示例

Intercept屬性用於指定顏色分量的線性函數的截距。應當注意，type屬性設置為線性。使用此屬性的元素包括：<feFuncA>，<feFuncB>，<feFuncG>和<feFuncR>。

用法:

intercept = "number"

屬性值：攔截屬性接受上麵提到和下麵描述的值

number:這定義了整數或帶有小數部分的數字。

注意：截距屬性的默認值為0。

下麵的示例說明了攔截屬性的用法。

範例1：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; margin-left:35px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="-60 0 1420 200" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <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>

輸出：

範例2：

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <h1 style="color:green; margin-left:35px;"> 
        GeeksforGeeks 
    </h1> 
  
    <svg viewBox="-60 0 1420 200" 
        xmlns="http://www.w3.org/2000/svg"> 
          
        <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>

輸出：

相關用法

注：本文由純淨天空篩選整理自thacker_shahid大神的英文原創作品 SVG intercept Attribute。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。