SVG fePointLight Element
Last Updated :
06 Apr, 2022
The <fePointLight> filter primitive defines a light source which allows to create a point light effect.
Syntax:
<fePointLight x="" y="" z="" />
Attributes :
- x: It defines a x-axis coordinate in the user coordinate system.
- y: It defines a y-axis coordinate in the user coordinate system.
- z: It defines a z-axis coordinate in the user coordinate system.
Example:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< defs >
< filter id = "spotlight" >
< feSpecularLighting result = "spotlight"
specularConstant = "1.9"
specularExponent = "500"
lighting-color = "#FFF" >
< fePointLight x = "10" y = "10" z = "150" />
</ feSpecularLighting >
< feComposite in = "Backgrou" in2 = "spotlight"
operator = "arithmetic" k1 = "3"
k2 = "3" k3 = "1" k4 = "0" />
</ filter >
</ defs >
< image xlink:href =
"C:/Users/pc/Desktop/gfg/capture42.png"
x = "10%" y = "10%" width = "80%" height = "80%"
style = "filter:url(#spotlight);" />
</ svg >
</ body >
</ html >
|
Output:
Example 2:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< defs >
< filter id = "spotlight" >
< feSpecularLighting result = "spotlight"
specularConstant = "1.5"
specularExponent = "80"
lighting-color = "#FFF" >
< fePointLight x = "20" y = "20" z = "200" />
</ feSpecularLighting >
< feComposite in = "SourceGraphic"
in2 = "spotlight" operator = "arithmetic"
k1 = "0" k2 = "1" k3 = "1" k4 = "0" />
</ filter >
</ defs >
< image xlink:href =
"C:/Users/pc/Desktop/gfg/capture25.png"
x = "10%" y = "10%" width = "80%" height = "80%"
style = "filter:url(#spotlight);" />
</ svg >
</ body >
</ html >
|
Output:
Example 3:
HTML
<!DOCTYPE html>
< html >
< body >
< svg width = "200" height = "200" >
< defs >
< filter id = "spotlight" >
< feSpecularLighting result = "spotlight"
specularConstant = "1.5"
specularExponent = "80"
lighting-color = "#FFF" >
< fePointLight x = "12" y = "12" z = "120" />
</ feSpecularLighting >
< feComposite in = "SourceGraphic"
in2 = "spotlight" operator = "arithmetic"
k1 = "0" k2 = "1" k3 = "1" k4 = "0" />
</ filter >
</ defs >
< image xlink:href =
"C:/Users/pc/Desktop/gfg/capture14.png"
x = "10%" y = "10%" width = "80%" height = "80%"
style = "filter:url(#spotlight);" />
</ svg >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...