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"
< 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:
Share your thoughts in the comments
Please Login to comment...