The lighting-color attribute represents the color of the light source for lighting filter primitives. The elements that using this attribute includes <feDiffuseLighting> and <feSpecularLighting>
Syntax:
lighting-color ="color"
Attribute Values: The lighting-color attribute accepts the values mentioned above and described below
- color: It represents the decorative and textual parts of the element.
Note: The default value of lighting-color is white.
Below examples illustrate the use of lighting-color attribute.
Example 1:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
margin-left: -5px;
font-size: 25px;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 1280 200"
xmlns="http://www.w3.org/2000/svg">
<filter id="geek1" x="0" y="0"
width="100%" height="100%">
<feDiffuseLighting in="SourceGraphic"
lighting-color="green">
<fePointLight x="100" y="100" z="10"/>
</feDiffuseLighting>
</filter>
<rect width="200" height="200"
style="filter: url(#geek1);"/>
</svg>
</body>
</html>
Output:
Example 2:
<!DOCTYPE html>
<html>
<body>
<h1 style="color: green;
margin-left: -5px;
font-size: 25px;">
GeeksforGeeks
</h1>
<svg viewBox="0 0 1280 200"
xmlns="http://www.w3.org/2000/svg">
<filter id="geek2" x="0" y="0"
width="100%" height="100%">
<feDiffuseLighting in="SourceGraphic"
lighting-color="yellow">
<fePointLight x="150" y="150" z="60"/>
</feDiffuseLighting>
</filter>
<rect width="200" height="200"
style="filter: url(#geek2);"/>
</svg>
</body>
</html>
Output:
