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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...