SVG <feSpotLight> Element (original) (raw)

Last Updated : 31 Mar, 2022

SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. The 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:

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:

html `

                <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>

`

Output:

Example 2:

html `

                <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>

`

Output: