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