SVG pointsAtZ Attribute

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:

Explore