SVG z Attribute

Last Updated : 31 Mar, 2022

The z attribute in SVG is used to define the location along the z-axis in the coordinate system for a light source established by the primitiveUnits attribute on the <filter> element.

We assume that the positive z-axis comes out towards the person viewing the content and also one unit along the z-axis is equal to one unit in x and y. The two SVG elements that use the z attribute are <fePointLight> and <feSpotLight>.

Syntax:

z = "number"

Attribute Values: This attribute accepts one value as mentioned above and described below:

  • number: It represents a number, which is either an integer or a number with a fractional component.

Below examples illustrate the use of the z attribute.

Example 1:

HTML
<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    
    <svg viewBox="0 0 420 200" 
    xmlns="http://www.w3.org/2000/svg">

        <filter id="geek1" x="0" y="0" 
            width="50%" height="50%">
            
            <feDiffuseLighting in="SourceGraphic">
                <fePointLight x="60" y="60" z="10" />
            </feDiffuseLighting>
        </filter>

        <rect x="0" y="0" width="200" 
            height="200" 
            style="filter: url(#geek1);" />
    </svg>
</body>

</html>

Output:

Example 2:

HTML
<!DOCTYPE html>
<html>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <svg viewBox="0 0 420 200" 
        xmlns="http://www.w3.org/2000/svg">

        <filter id="geek2" x="0" y="0" 
            width="50%" height="50%">
            
            <feDiffuseLighting in="SourceGraphic">
                <fePointLight x="60" y="60" z="50" />
            </feDiffuseLighting>
        </filter>

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

</html>

Output:

Comment

Explore