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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。