SVG lighting-color Attribute
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:
Please Login to comment...