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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。