SVG <feFuncR>用法及代码示例

SVG 代表可缩放矢量图形。它可以用来制作图形和动画，就像在 HTML 画布中一样。

在本文中，我们将了解 <feFuncR> 元素，它是一个 SVG 过滤器基元，用于为其父 <feComponentTransfer> 元素的输入图形的红色分量传递函数。 <feComponentTransfer> 元素分别在每个颜色通道上实现颜色操作。

该元素的四个颜色通道如下。

<feFuncR> 元素：该元素用于传递其父 <feComponentTransfer> 元素的输入图形的红色分量的函数。
<feFuncG> 元素：该元素用于传递其父 <feComponentTransfer> 元素的输入图形的绿色分量的函数。
<feFuncB> 元素：该元素用于传递其父 <feComponentTransfer> 元素的输入图形的蓝色分量的函数。
<feFuncA> 元素：该元素用于传递其父 <feComponentTransfer> 元素的输入图形的 alpha 分量的函数。

注意：请记住，当您执行颜色操作时，每种类型的元素应该只有一个子元素。

用法:

<feFuncR type="type_name" tableValues="value_name"/>

使用的核心属性：

id: 它用于为元素分配唯一的名称
lang: 它用于指定包含特定元素的文本内容的内容和属性中使用的主要语言。
tabindex: 它用于允许您控制元素是否可聚焦，并定义元素的相对顺序以实现顺序焦点导航。
xml：基础：它用于指定除文档或外部实体的基本 IRI 之外的基本 IRI。
xml:lang:它曾经是包含特定元素文本内容的内容和属性中使用的主要语言。
xml：空间：它用于处理元素内的空白字符。

传递函数属性：

type: 它是一个通用属性，根据使用的上下文具有不同的含义。
tableValues: 它用于定义数字列表，定义颜色分量传递函数的值查找表。
slope: 它用于指示字体的垂直笔画角度。
intercept: 它用于定义当类型属性设置为线性时颜色分量传递的线性函数的截距。
amplitude: 当其 type 属性为 gamma 时，用于控制分量传输元素的 gamma 函数的幅度。
exponent: 它用于定义伽马函数的指数。

示例 1：在下面的代码中，我们将使用 SVG <feFuncR> 元素。

HTML


<!DOCTYPE html> 
<html> 
  
<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> 
                    <feFuncR type="table" 
                        tableValues="0 0 1 0" /> 
                </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-300x300.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-300x300.png" /> 
    </svg> 
</body> 
  
</html>

输出：

示例 2：在下面的代码中，我们将使用 <feFuncR> 元素。

HTML


<!DOCTYPE html> 
<html> 
  
<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> 
                    <feFuncR type="table" 
                        tableValues="1 0 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/20210915115837/gfg3-300x300.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-300x300.png" /> 
    </svg> 
</body> 
  
</html>

输出：

参考：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feFuncR

相关用法

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