El atributo pointsAtY denota la posición y en el sistema de coordenadas establecido por el atributo nativeUnits en el elemento <filter> del punto al que apunta la fuente de luz. Solo el elemento <feSpotLight> está usando este atributo.
Sintaxis:
pointsAtY = number
Valores de atributo: el atributo pointsAtY acepta los valores mencionados anteriormente y descritos a continuación
- número: Es un valor numérico que se refiere a las unidades del sistema de coordenadas actual. Su valor por defecto se considera 0.
Los siguientes ejemplos ilustran el uso del atributo pointsAtY .
Ejemplo 1:
<!DOCTYPE html> <html> <body> <div style="color: green;"> <h1>GeeksforGeeks</h1> <svg viewBox="0 0 1120 200" xmlns="http://www.w3.org/2000/svg"> <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>
Producción:
Ejemplo 2:
<!DOCTYPE html> <html> <body> <div style="color: green;"> <h1>GeeksforGeeks</h1> <svg viewBox="0 0 1120 200" xmlns="http://www.w3.org/2000/svg"> <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>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA