The SVG <feDiffuseLighting> filter primitive lights an image using the alpha channel as a bump map. Using diffuse lighting the sides of the object facing the light are brighter and the sides facing away are darker and in shadow.
Syntax :
<feDiffuseLighting> Contents... </feDiffuseLighting>
Attributes:
- in —The in attribute identifies input for the given filter primitive.
- surfaceScale — It represents the height of the surface. Its value is multiplied by the alpha value. Default value is 1.
- diffuseConstant — It is a non-negative number whose default value is 1.
- kernelUnitLength — It tells the intended distance between successive columns and rows in the kernelMatrix. The intended distance is represented in current filter units. Default value is 1.
Example 1:
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 1000 1000">
<filter id="lightMe2">
<feDiffuseLighting in="SourceGraphic"
surfaceScale="1" diffuseConstant="2"
kernelUnitLength="2">
<fePointLight x="80" y="80" z="40" />
<feDistantLight azimuth="240"
elevation="20" />
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="light"
operator="arithmetic" k1="1" k2="0"
k3="0" k4="0" />
</filter>
<rect x="20" y="20" width="200" height="200"
fill="green"
style="filter: url(#lightMe2);" />
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 1000 1000">
<filter id="lightMe3">
<feDiffuseLighting in="BackgroundImage"
surfaceScale="4" diffuseConstant="2"
kernelUnitLength="2">
<feSpotLight x="30" y="20" z="30"
limitingConeAngle="40"
pointsAtX="200" pointsAtY="200"
pointsAtZ="0" />
<fePointLight x="80" y="80" z="40" />
</feDiffuseLighting>
<feComposite in="SourceGraphic"
in2="light" operator="arithmetic"
k1="1" k2="0" k3="0" k4="0" />
</filter>
<rect x="20" y="20" width="200" height="200"
fill="blue"
style="filter: url(#lightMe3);" />
</svg>
</body>
</html>
Output:
