Open In App

SVG pointsAtZ Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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

The element that is using this attribute:

  • <feSpotLight> element

Syntax:

pointsAtZ = number

Attribute Values: The pointsAtZ 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 0.

Below examples illustrate the use of pointsAtZ attribute

Example 1: In this example, the point is set to 0.

HTML




<!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="120" y="120" 
                            z="50" pointsAtZ="0"/>
                    </feDiffuseLighting>
                </filter>
                
                <rect width="200" height="250"
                      style="filter: url(#Geek1);"/>
              </svg>
        </div>
   </body>
  
</html>


Output:

Example 2: the point is set to 200 in this example

HTML




<!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="120" y="120" 
                        z="50" pointsAtZ="200"/>
                </feDiffuseLighting>
            </filter>
                    
            <rect width="200" height="250" 
                  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