SVG <feFuncG>用法及代码示例

SVG 代表可缩放矢量图形。 SVG 元素路径用于定义从某个位置开始到某个特定位置结束的路径。 SVG 路径可用于创建任何基本形状。

SVG <feFuncG> 元素：这些元素通常是<feComponentTransfer>并指定其父 <feComponentTransfer> 元素的输入图形的绿色分量的传递函数。

用法:

<feComponentTransfer>       
    <feFuncG type="" tableValues=""/>
</feComponentTransfer>

属性：它没有任何指定的属性，但它接受全局属性。

示例 1：以下代码演示了类型为 “table” 的 <feFuncG> 元素。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG feFuncG Element</title> 
</head> 
  
<body> 
    <svg width="640" height="550" 
        viewBox="0 0 640 550"> 
        <defs> 
            <filter id="new" 
                filterUnits="objectBoundingBox" 
                x="0%" y="0%" width="100%" 
                height="100%"> 
  
                <feComponentTransfer> 
                    <feFuncG type="table" 
                        tableValues="1 1 0 0" /> 
                </feComponentTransfer> 
            </filter> 
        </defs> 
  
        <image x="10" y="10" width="280" 
            height="350" preserveAspectRatio="true"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-19.png" /> 
        <image x="310" y="10" width="280" 
            height="350" preserveAspectRatio="true" 
            filter="url(#new)"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-19.png" /> 
    </svg> 
</body> 
  
</html>

输出：

示例 2：以下代码演示了类型为 “discrete” 的 <feFuncG> 元素。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG feFuncG Element</title> 
</head> 
  
<body> 
    <svg width="640" height="550" 
        viewBox="0 0 640 550"> 
        <defs> 
            <filter id="new" 
                filterUnits="objectBoundingBox" 
                x="0%" y="0%" width="100%" 
                height="100%"> 
                <feComponentTransfer i 
                    n="BackgroundImage" result="A"> 
                    <feFuncG type="discrete" 
                        tableValues="1 0.5 0.5 0.5" /> 
                </feComponentTransfer> 
            </filter> 
        </defs> 
  
        <image x="10" y="10" width="280" 
            height="350" preserveAspectRatio="true"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" /> 
        <image x="310" y="10" width="280" 
            height="350" preserveAspectRatio="true" 
            filter="url(#new)"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" /> 
    </svg> 
</body> 
  
</html>

输出：

示例 3：以下代码演示了类型为 “gamma” 的 <feFuncG> 元素，并且使用值设置了诸如 “amplitude”,”exponent”,”offset” 之类的属性。

HTML


<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SVG feFuncG Element</title> 
</head> 
  
<body> 
    <svg width="640" height="550" 
        viewBox="0 0 640 550"> 
        <defs> 
            <filter id="new" 
                filterUnits="objectBoundingBox" 
                x="0%" y="0%" width="100%" 
                height="100%"> 
  
                <feComponentTransfer 
                    in="BackgroundImage" result="A"> 
                    <feFuncG type="gamma" amplitude="3" 
                        exponent="3" offset="0"> 
                    </feFuncG> 
                </feComponentTransfer> 
            </filter> 
        </defs> 
        <image x="10" y="10" width="280" height="350" 
            preserveAspectRatio="true"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png" /> 
        <image x="310" y="10" width="280" height="350"
             preserveAspectRatio="true" filter="url(#new)"
            xlink:href= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png" /> 
    </svg> 
</body> 
  
</html>

输出：

相关用法

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