El atributo pointsAtX denota la posición x 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:
pointsAtX = number
Valores del atributo: el atributo pointsAtX 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 pointsAtX .
Ejemplo 1:
<!DOCTYPE html> <html> <body> <div style="color: green;"> <h1>GeeksforGeeks</h1> <svg viewBox="-10 0 1120 200" xmlns="http://www.w3.org/2000/svg"> <filter id="Geek1" x="0.01" width="100%" height="100%"> <feDiffuseLighting in="SourceGraphic"> <feSpotLight x="50" y="50" z="60" pointsAtX="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="-10 0 1120 200" xmlns="http://www.w3.org/2000/svg"> <filter id="geek2" x="0.01" width="100%" height="100%"> <feDiffuseLighting in="SourceGraphic"> <feSpotLight x="60" y="60" z="50" pointsAtX="400" /> </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