映射置换滤镜

前端教程SVG

<feDisplacementMap> 映射置换滤镜来自于 in2 图形的像素值替换 in 图形的像素值，输出置换后的 in 图形。

基本语法

<filter id="displacementFilter">
    <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G"/>
</filter>

• in 输入源图形
• in2 用于替换 in 图形的像素
• scale 缩放比例，值为 0 时没有效果
• xChannelSelector="R | G | B | A(默认)" 表示 X 轴使用 in2 图形的哪个颜色通道
• yChannelSelector="R | G | B | A(默认)" 表示 Y 轴使用 in2 图形的哪个颜色通道

置换公式：

P'(x,y) = P(x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

• P 为 in 图形种的某个原像素值
• P'为置换后的像素值
• XC(x,y) 是 in2 图形在(x,y)处的某个颜色通道的值（0~1），根据 xChannelSelector 确定是R或G或B或A值
• YC(x,y) 是 in2 图形在(x,y)处的某个颜色通道的值（0~1），根据 yChannelSelector 确定是R或G或B或A值
• scale缩放比例

示例

以下示例中，<feTrublulence> 结合 <feDisplacementMap> 实现了动态水波效果

• <feTrublulence> 滤镜产生随机的噪声图形 turbulence
  • 注意：我们使用了 <animate> 动画元素让噪声图形有了动态效果。
• <feDisplacementMap> 将噪声图形 turbulence 和原图形（上海东方明珠）进行替换

新窗口打开