Open In App

SVG pointsAtY Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

pointsAtY = number

Attribute Values: The pointsAtY 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 pointsAtY attribute.

Example 1:




<!DOCTYPE html>
<html>
  
<body>
    <div style="color: green;">
  
        <h1>GeeksforGeeks</h1>
          
        <svg viewBox="0 0 1120 200" 
            xmlns="http://www.w3.org/2000/svg">
  
            <filter id="geek1" width="100%" 
                height="100%">
                  
                <feDiffuseLighting in="SourceGraphic">
                    <feSpotLight x="50" y="50" 
                        z="60" pointsAtY="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="0 0 1120 200" 
            xmlns="http://www.w3.org/2000/svg">
  
            <filter id="geek2" width="100%" 
                height="100%">
                  
                <feDiffuseLighting in="SourceGraphic">
                    <feSpotLight x="50" y="50" 
                        z="60" pointsAtY="500" />
                </feDiffuseLighting>
            </filter>
  
            <rect width="200" height="200" 
                style="filter: url(#geek2);" />
        </svg>
    </div>
</body>
  
</html>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads