SVG FEDisplacementMap.in1 属性介绍

概述

在 SVG 中，FEDisplacementMap 滤镜效果用于根据一个图像中的颜色信息来扭曲另一个图像的颜色通道。FEDisplacementMap.in1 属性指定了用作扭曲图像的源图像。

语法

FEDisplacementMap.in1 = "url(#sourceImage)"

属性值

• url(#sourceImage): 表示一个 SVG 元素的 id，指定用作扭曲图像的源图像。源图像可以是 <image>、<video>、<canvas> 等元素。

示例

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feImage id="sourceImage" xlink:href="distortion.jpg" result="image" />
    <feDisplacementMap in="SourceGraphic" in2="image" scale="50" xChannelSelector="R" yChannelSelector="G" />
  </filter>
  <rect width="400" height="400" fill="blue" filter="url(#displacementFilter)" />
</svg>

解释

上述示例代码中，我们创建了一个滤镜效果，并将其应用到一个矩形元素上。这个滤镜效果使用了 FEDisplacementMap 来扭曲矩形中的颜色通道。

具体来说，我们首先使用 <feImage> 元素将一个名为 "distortion.jpg" 的图像作为源图像加载到 SVG 中，并通过 id="sourceImage" 为其指定一个id。

然后，我们通过 <feDisplacementMap> 元素将原始图像 (in="SourceGraphic") 和我们加载的源图像 (in2="image") 进行扭曲。具体的扭曲效果由 scale、xChannelSelector 和 yChannelSelector 等属性决定。

最后，我们将滤镜效果应用到一个蓝色矩形元素上，即 <rect>，通过 filter="url(#displacementFilter)" 设置滤镜效果。

总结

FEDisplacementMap.in1 属性用于指定 FEDisplacementMap 滤镜效果中作为扭曲图像的源图像。通过设置不同的源图像，我们可以实现各种扭曲和变形效果，为 SVG 图形添加更丰富的视觉效果。