SVG FEDisplacementMap.yChannelSelector 属性介绍

SVG 的 FEDisplacementMap.yChannelSelector 属性是指在使用滤镜时，选择 y 通道用于进行位移的方法。y 通道即是一种颜色空间，它用于在垂直方向上对滤镜进行位移。

属性值

FEDisplacementMap.yChannelSelector 属性可取的值有以下几种：

• identity：使用源图像来创建位移图像的 y 通道。
• R：使用源图像中的红色通道（R）来创建位移图像的 y 通道。
• G：使用源图像中的绿色通道（G）来创建位移图像的 y 通道。
• B：使用源图像中的蓝色通道（B）来创建位移图像的 y 通道。
• A：使用源图像中的透明通道（A）来创建位移图像的 y 通道。

使用示例

以下是一个使用 FEDisplacementMap.yChannelSelector 属性的示例代码：

<svg height="100" width="100">
  <defs>
    <filter id="displacementFilter" x="-50%" y="-50%" width="200%" height="200%">
      <feTurbulence type="fractalNoise" baseFrequency="0.05 0.05" numOctaves="3"/>
      <feDisplacementMap in="SourceGraphic" xChannelSelector="R" yChannelSelector="G" scale="20"/>
    </filter>
  </defs>
  <circle cx="50" cy="50" r="40" fill="blue" filter="url(#displacementFilter)"/>
</svg>

在这个例子中，我们使用了 feDisplacementMap 滤镜来对一个圆形进行位移。其中 yChannelSelector 属性设置为 G，表示使用源图像的绿色通道来创建位移图像的 y 通道，因此圆形会在垂直方向上以绿色通道的值为准进行位移。

总结

通过 FEDisplacementMap.yChannelSelector 属性的设置，我们可以灵活地控制滤镜效果中的垂直方向上的位移，从而实现各种有趣的效果。