SVG feDiffuseLighting 元素

feDiffuseLighting 元素是SVG的滤镜元素之一，它用于将一个输入图像转换为以光照为基础的阴影效果。

使用方式

feDiffuseLighting 元素有两个必要的属性：in（指定某个输入图像）、surfaceScale（定义光源面的大小）。此外，还有另外两个属性可供设置：diffuseConstant（定义漫射光强度）和kernelUnitLength（卷积核的大小）。

<svg>
  <filter id="feDiffuseLighting">
    <feDiffuseLighting
      in="SourceGraphic"
      surfaceScale="10"
      diffuseConstant="1"
      kernelUnitLength="0,0">
      <feDistantLight azimuth="135" elevation="30" />
    </feDiffuseLighting>
  </filter>

  <rect x="20" y="20" width="40" height="40" fill="blue" filter="url(#feDiffuseLighting)" />
</svg>

上面的代码定义了一个 feDiffuseLighting 元素，并将阴影效果应用于一个蓝色的矩形。其中，feDiffuseLighting 的 in 属性设置为 SourceGraphic（表示使用源图像作为输入），surfaceScale 设置为 10，diffuseConstant 设置为 1，kernelUnitLength 设置为 0。

feDiffuseLighting 元素中还可以包含一个光源，它由 feDistantLight 元素表示。上面的代码中，我们设置了一个 azimuth 为 135，elevation 为 30 的光源。

效果演示

下面是 feDiffuseLighting 元素的效果演示。原始图形是一个蓝色的矩形，应用了 feDiffuseLighting 后，它变成了一个带有阴影的矩形。

总结

feDiffuseLighting 元素可以为SVG图像添加光源效果，让图像看起来更加逼真。通过设置不同的属性和光源参数，可以实现不同的阴影效果。