混合滤镜

前端教程SVG

<feComposite> 混合滤镜将2个输入源图形的像素进行合并。

基本语法

<filter id="imageOver">
    ...
    <feComposite in="result1" in2="result2" operator="arithmetic" k1="1" k2="2" k3="1" k4="1" />
</filter>

• in：输入图形1
• in2：输入图形2
• operator="over(默认) | in | out | atop | xor | lighter | arithmetic"：混合类型
  • arithmetic 算法：RESULT = k1INPUT1INPUT2 + k2INPUT1 + k3INPUT2 + k4
  • RESULT 为结果像素值；INPUT1 为输入图形1某个像素点的值，INPUT2 为输入图形2对应像素点的值
  • 详细类型说明，请参考：MDN - feComposite
• k1 k2 k3 k4：当 operator=arithmetic 时，对应公式里的参数

示例

• 左图和中间图是原始的样子，右图是合成之后的样子

新窗口打开

Lighting + <feComposite>

我们在前面讲解 <feDiffuseLighting> 和 <feSpecularLighting> 时，得到的是光照贴图（light map），接下来我们结合 <feComposite> 把 light map 贴到原始图形上，得到真实的光照效果。

<feDiffuseLighting> + <fePointLight> + <feComposite>：

新窗口打开

<feDiffuseLighting> + <feSpotLight> + <feComposite>：

新窗口打开

<feSpecularLighting> + <fePointLight> + <feComposite>：

新窗口打开

feSpecularLighting> + <feSpotLight> + <feComposite>：

新窗口打开