SVG <feSpotLight> Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas.
The <feSpotLight> SVG defines a light source which results in a spotlight effect. It defines a spotlight whose light is directed at a specific point and it only lights a limited area.
Syntax:
<feSpotLight x="" y="" z="" pointsAtX="" pointsAtY=""
pointsAtZ="" specularExponent="" limitingConeAngle="" />
Attributes:
- x, y, z:It tells the corresponding x, y, z in co-ordinate system.
- pointsAtX, pointsAtY, pointsAtZ: X, Y, Z location of the point where the light is shining on.
- specularExponent: It tells the focus of light on a single point. Default value is 1.
- limitingConeAngle: It tells the angle in degrees between two lines i.e. spot light axis and spot light cone.
Example 1:
<!DOCTYPE html><html> <body> <svg width="200" height="200"> <defs> <filter id="spotlight"> <feSpecularLighting result="spec3" in="blur3" specularConstant="1.2" specularExponent="7" lighting-color="#FFF"> <feSpotLight x="400" y="400" z="900" limitingConeAngle="9" /> </feSpecularLighting> <feComposite in="SourceGraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0" /> </filter> </defs> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: lightgreen; filter: url(#spotlight);" /> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#spotlight);" /> <g fill="#FFFFFF" stroke="black" font-size="10" font-family="Verdana"> <text x="50" y="90">GeeksForGeeks</text> </svg></body> </html> |
Output:
Example 2:
<!DOCTYPE html><html> <body> <svg width="200" height="200"> <defs> <filter id="FillPaint"> <feSpecularLighting result="spec3" in="blur3" specularConstant="1.2" specularExponent="7" lighting-color="#FFF"> <feSpotLight x="600" y="600" z="1200" pointAtX="400" pointAtY="400" pointAtZ="400" limitingConeAngle="9" /> </feSpecularLighting> <feComposite in="SourceGraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0" /> </filter> </defs> <rect x="1" y="1" width="198" height="118" style="stroke: #000000; fill: black; filter: url(#FillPaint);" /> <circle cx="100" cy="60" r="55" stroke="darkgreen" stroke-width="3" fill="Lightgreen" style="stroke: filter: url(#FillPaint);" /> <g fill="#FFFFFF" stroke="Green" font-size="10" c font-family="Verdana"> <text x="60" y="62">GeeksForGeeks</text> </svg></body> </html> |
Output:
.png)
