Open In App

SVG pointsAtX Attribute

Last Updated : 31 Mar, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

The pointsAtX attribute denotes the x position in the coordinate system established by primitiveUnits attribute on the <filter> element of the point at which the light source is pointing. Only <feSpotLight> element is using this attribute.

Syntax:

pointsAtX = number

Attribute Values: The pointsAtX attribute accepts the values mentioned above and described below:

  • number: It is a numeric value referring to the units of the current coordinate system. Its default value is considered as 0.

Below examples illustrate the use of pointsAtX attribute.

Example 1:

html 
<!DOCTYPE html>
<html>

<body>
    <div style="color: green;">

        <h1>GeeksforGeeks</h1>
        
        <svg viewBox="-10 0 1120 200" 
            xmlns="http://www.w3.org/2000/svg">

            <filter id="Geek1" x="0.01" 
                width="100%" height="100%">
                
                <feDiffuseLighting in="SourceGraphic">
                    <feSpotLight x="50" y="50" 
                        z="60" pointsAtX="0" />
                </feDiffuseLighting>
            </filter>

            <rect width="200" height="200" 
                style="filter: url(#Geek1);" />
        </svg>
    </div>
</body>

</html>

Output:

Example 2:

html 
<!DOCTYPE html>
<html>

<body>
    <div style="color: green;">

        <h1>GeeksforGeeks</h1>
        
        <svg viewBox="-10 0 1120 200" 
            xmlns="http://www.w3.org/2000/svg">

            <filter id="geek2" x="0.01" 
                width="100%" height="100%">
                
                <feDiffuseLighting in="SourceGraphic">
                    <feSpotLight x="60" y="60" 
                        z="50" pointsAtX="400" />
                </feDiffuseLighting>
            </filter>

            <rect width="200" height="200" 
                style="filter: url(#geek2);" />
        </svg>
    </div>
</body>

</html>

Output:


Next Article
HTML Introduction

T
thacker_shahid
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox