SVG lighting-color Attribute
Last Updated :
31 Mar, 2022
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"
< 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"
< 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:
Share your thoughts in the comments
Please Login to comment...