The pointsAtY attribute denotes the y position in the coordinate system established by attribute primitiveUnits on the <filter> element of the point at which the light source is pointing. Only <feSpotLight> element is using this attribute.
Syntax:
pointsAtY = number
Attribute Values: The pointsAtY 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 considered as 0.
Below examples illustrate the use of pointsAtY attribute.
Example 1:
<!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="50" y="50" z="60" pointsAtY="0" />
</feDiffuseLighting>
</filter>
<rect width="200" height="200" style="filter: url(#geek1);" />
</svg>
</div>
</body>
</html>
|
Output:
Example 2:
<!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="50" y="50" z="60" pointsAtY="500" />
</feDiffuseLighting>
</filter>
<rect width="200" height="200" style="filter: url(#geek2);" />
</svg>
</div>
</body>
</html>
|
Output: