SVG FEDisplacementMap.in2属性

FEDisplacementMap元素是SVG过滤器中用于创建图像扭曲效果的元素之一。常常和FETurbulence元素一起使用。FEDisplacementMap.in2属性用于指定作为扭曲贴图之一的图像元素。

语法

<filter id="filter-id">
  <feDisplacementMap in="input-value" in2="displacement-map" xChannelSelector="channel-selector" yChannelSelector="channel-selector" scale="scale-value" offset="offset-value">
  </feDisplacementMap>
</filter>

属性值

• "displacement-map"：表示作为扭曲贴图的图像元素的ID或SVG图像URI。默认值为none。
• xChannelSelector：x通道选择器属性。
  • 取值：r,g,b,a。
  • 默认r。
  • 它控制in1的红色值将被采用作为x偏移值或扭曲强度的强度。
• yChannelSelector：y通道选择器属性。
  • 取值：r,g,b,a。
  • 默认g。
  • 它控制in1的绿色值将被采用作为y偏移值或扭曲强度的强度。
• scale：指定了平均映射矢量的 "大小" (即灰度值 128 的映射矢量的实际大小)。
  • 取值：任意数字。
  • 默认值为0。
• offset：介于-1.0到+1.0之间的值，旨在平移指定的位于输入图像中像素的选定通道。通过将该偏移量分配给某个通道，您可以创建一些几乎看起来像发亮或阴影的效果。
  • 取值：任意数字。
  • 默认值为0。

示例

HTML

<svg width="300" height="200" >
  <defs>
    <filter id="displacementFilter">
      <feTurbulence type="fractalNoise"/>
      <feDisplacementMap in="SourceGraphic" in2="turbulence" xChannelSelector="R" yChannelSelector="B" scale="20"/>
    </filter>
  </defs>
  <rect x="50" y="50" width="200" height="100" fill="#43A047" filter="url(#displacementFilter)"/>
</svg>

这将创建一个绿色的矩形，其中应用了一个渲染噪声贴图作为扭曲贴图。运用了红色通道的数据以创建水平扭曲，将蓝色通道的数据应用于垂直扭曲。最后将所有矩形的全局位置平移了20。

效果