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