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