SVG xChannelSelector屬性用法及代碼示例

SVG中的xChannelSelector屬性用於指示來自in2的顏色通道，該顏色通道用於沿x軸移動in的像素。僅<feDisplacementMap>元素正在使用此屬性。

用法:

yChannelSelector = "R | G | B | A"

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

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

範例1：本示例說明使用“R”屬性值的xChannelSelector屬性。

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>  
              
        <ellipse cx="100" cy="80" 
            rx="100" ry="70"
            style="fill:green; 
            filter:url(#geek)"/> 
        </svg>  
    </body>  
  
</html>

輸出：

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

HTML

<!DOCTYPE html>  
<html>  
    <body>  
        <h1 style="color:green;  
            margin-left:20px;">  
            GeeksforGeeks  
        </h1>  
        <svg width="1800"
            height="1800"
            viewBox="25 10 400 400"
            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="10"
            xChannelSelector="R"
            yChannelSelector="G"/>  
        </filter>  
          
        <polygon points="50 10 55 30 70 30 60 
            40 65 55 50 45 35 55  
            40 40 30 30 45 30" 
            stroke="green" 
            fill="green" 
            style="filter:url(#geek)"/> 
        </svg>  
    </body>  
</html>

輸出：

相關用法

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