fedisplacementmap

<feDisplacementMap>SVG过滤器原语从使用来自图像的像素值in2在空间上置换从图像in。

转换公式如下所示：

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

其中 p (x、y) 是输入图像, in 和 p "(x、y) 是目标。XC (x、y) 和 YC (x,y) 是 xChannelSelector 和 yChannelSelector 指定的通道的分量值。

用法上下文

属性

全局属性

• Core attributes

• Presentation attributes

• Filter primitive attributes

• class

• style

具体属性

• in

• in2

• scale

• xChannelSelector

• yChannelSelector

DOM接口

这个元素实现了SVGFEDisplacementMapElement接口。

例

<svg width="200" height="200" viewBox="0 0 220 220"
     xmlns="http://www.w3.org/2000/svg">
  <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>

  <circle cx="100" cy="100" r="100"
      style="filter: url(#displacementFilter)"/>
</svg>

​

产品规格

浏览器兼容性