SVG <feDisplacementMap>元素

<feDisplacementMap>元素是SVG（可缩放矢量图形）中的一个滤镜元素，用于图像的扭曲和变形效果。它通过使用一个或两个输入图像（源图像和位移图像）来创建输出图像。

语法

<feDisplacementMap in="input" in2="input2" scale="number" xChannelSelector="value" yChannelSelector="value" result="output"/>

属性

• in：指定输入图像的来源。
• in2：指定位移图像的来源。
• scale：指定位移图像的缩放比例。
• xChannelSelector：指定应用于红色通道的位移量。
• yChannelSelector：指定应用于绿色和蓝色通道的位移量。
• result：指定输出的ID。

描述

<feDisplacementMap>元素通过使用图像的灰度值将源图像像素的位置进行位移，然后将位移后的像素值映射回输出图像上的像素。它通过在输入图像的相应像素周围创建一个“图像矢量场”来实现扭曲和变形的效果。

• scale属性用于控制位移图像的缩放大小。较大的值会产生较大的位移效果。
• xChannelSelector和yChannelSelector属性用于选择应用到各个通道的位移量，可选值有R、G、B、A和none。
• result属性用于指定输出结果的ID。

示例

以下示例演示了使用<feDisplacementMap>元素创建图像的扭曲效果。

<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence type="fractalNoise" baseFrequency="0.01" result="noise"/>
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="50" xChannelSelector="R" yChannelSelector="G" result="displaced" />
  </filter>
  <image xlink:href="input.jpg" width="400" height="300" filter="url(#displacementFilter)"/>
</svg>

在上述示例中，<feDisplacementMap>元素将SourceGraphic作为输入图像，并使用一些噪音（通过<feTurbulence>元素生成）作为位移图像。scale属性设置为50，xChannelSelector属性设置为红色通道（R），yChannelSelector属性设置为绿色通道（G）。最终生成的扭曲图像作为滤镜应用于<image>元素上。

要点总结

• <feDisplacementMap>元素用于创建SVG图像的扭曲和变形效果。
• 可通过设置属性来调整位移图像的大小、选择通道以及指定输出结果的ID。
• 可以与其他滤镜元素一起使用，以实现更复杂的效果。

请注意，上述示例代码中的input.jpg和displacementFilter仅用于演示目的，实际使用时需要根据实际情况进行修改。

参考文档：

• SVG <feDisplacementMap>元素