SVG feDisplacementMap 标签

简介

使用 in2 输入的图像去对从 in 输入的图像作置换操作,置换公式:
$$
P'(x,y) ← P(x + scale \times (XC(x,y) – 0.5), y + scale \times (YC(x,y) – 0.5))
$$

我们可以这样理解新的坐标值,$XC(x,y),YC(x,y)$ 分别表示当前像素点(x,y)在 XY 轴方向上使用哪个颜色通道进行位置偏移,范围是 0~1;scale 表示偏移比例,值越大偏移越大。
$$
x’ = x + scale \times (XC(x,y) – 0.5) \\
y’= y + scale \times (YC(x,y) – 0.5)
$$

专有属性

属性 说明
in 输入的原始图形
in2 用来置换的图形
scale 公式中的缩放比例,默认是0
xChannelSelector 对应 XC(x,y) 值,表示X轴坐标使用的是哪个颜色通道进行位置偏移。属性值是RGBA中任意一个,默认是 A 表示基于透明度进行位置偏移
yChannelSelector 对应 XC(x,y) 值,表示Y轴坐标使用的是哪个颜色通道进行位置偏移。属性值是RGBA中任意一个,默认是 A 表示基于透明度进行位置偏移

实例

当中定义一个 <feTurbulence> 用来置换的图像

<svg width="800" height="300" xmlns="http://www.w3.org/2000/svg">
    <filter id="filterTurbulence">
        <feTurbulence in="SourceGraphic" type="turbulence" baseFrequency="0.05" numOctaves="2" />
    </filter>
    <filter id="filterDisplacement">
        <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="turbulence"/>
        <feDisplacementMap in2="turbulence" in="SourceGraphic"
                           scale="50" xChannelSelector="B" yChannelSelector="G"/>
    </filter>
  <g fill="green">
        <circle cx="110" cy="120" r="100" />
        <circle cx="330" cy="120" r="80" style="filter: url(#filterTurbulence)"/>
        <circle cx="540" cy="120" r="100" style="filter: url(#filterDisplacement)"/>
    </g>
    <g  fill="green">
        <text x="100" y="260">原图</text>
        <text x="300" y="260">置换图像</text>
        <text x="540" y="260">结果</text>
    </g>
</svg>

效果:

留下评论

电子邮件地址不会被公开。 必填项已用*标注