SVG pointsAtX Attribute

Last Updated : 31 Mar, 2022

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:

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

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