SVG fePointLight Element (original) (raw)

Last Updated : 6 Apr, 2022

The filter primitive defines a light source which allows to create a point light effect.

Syntax:

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 `

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

`

Output:

Example 2:

HTML `

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

`

Output:

Example 3:

HTML `

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

`

Output: