<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 指定的通道的分量值。
与其它滤镜图元一样，它默认在 linearRGB 颜色空间中处理颜色分量。您可以使用 color-interpolation-filters 属性改为使用 sRGB。
使用语境
属性
DOM 接口
此元素实现了 SVGFEDisplacementMapElement 接口。
示例
html
<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" filter="url(#displacementFilter)" />
</svg>
规范
| 规范 |
|---|
| 滤镜效果模块第 1 级 # feDisplacementMapElement |
浏览器兼容性
加载中…