SVG yChannelSelector屬性用法及代碼示例

SVG中的yChannelSelector屬性用於指示來自in2的通道，該通道用於沿y軸移動in的像素。此屬性僅由<feDisplacementMap>元素使用。

用法:

yChannelSelector = "R | G | B | A"

屬性值：該屬性接受上述和以下所述的四個值：

R:它指定in2中定義的給定圖像的紅色通道將用於沿y軸移動圖像的像素。
G:它指定in2中定義的給定圖像的綠色通道將用於沿y軸移動圖像的像素。
B:它指定in2中定義的給定圖像的藍色通道將用於沿y軸移動圖像的像素。
A:它指定in2中定義的給定圖像的alpha通道將用於沿y軸移動圖像的像素。

範例1：本示例說明了使用“G”屬性值使用yChannelSelector屬性。

HTML

<!DOCTYPE html>   
<html>  
    <body> 
        <h1 style="color:green; 
                margin-left:20px;"> 
              GeeksforGeeks 
        </h1> 
        <svg width="500" 
             height="500" 
             viewBox="-30 50 200 100"
             xmlns="http://www.w3.org/2000/svg"> 
  
        <filter id="geek"> 
            <feTurbulence 
             type="turbulence" 
             baseFrequency="0.06"
             numOctaves="3" 
             result="turbulence"/> 
        <feDisplacementMap   
             in2="turbulence" 
             in="SourceGraphic"
             scale="40" 
             xChannelSelector="R" 
             yChannelSelector="G"/> 
        </filter> 
  
        <polygon points="0 0, 100 100, 0 100" 
             fill ="green" 
             style="filter:url(#geek)"/> 
        </svg> 
    </body> 
</html>

輸出：

範例2：本示例說明了使用“R”屬性值使用yChannelSelector屬性。

HTML

<!DOCTYPE html>   
<html>   
    
    <body> 
        <h1 style="color:green;"> 
              GeeksforGeeks 
        </h1> 
        <svg width="200" height="200" 
            viewBox="0 0 220 220"
            xmlns="http://www.w3.org/2000/svg"> 
  
        <filter id="geek"> 
            <feTurbulence 
            type="turbulence" 
            baseFrequency="0.05"
            numOctaves="2" 
            result="turbulence"/> 
        <feDisplacementMap in2="turbulence" 
            in="SourceGraphic"
            scale="50" 
            xChannelSelector="R" 
            yChannelSelector="R"/> 
        </filter> 
  
        <circle cx="100" cy="100" 
            r="100" fill ="green"
            style="filter:url(#geek)"/> 
        </svg> 
    </body> 
  
</html>

輸出：

相關用法

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