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