La primitiva de filtro <fePointLight> define una fuente de luz que permite crear un efecto de luz puntual.
Sintaxis:
<fePointLight x="" y="" z="" />
Atributos:
- x: Define una coordenada del eje x en el sistema de coordenadas del usuario.
- y: Define una coordenada del eje y en el sistema de coordenadas del usuario.
- z: Define una coordenada del eje z en el sistema de coordenadas del usuario.
Ejemplo:
HTML
<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <defs> <filter id="spotlight"> <feSpecularLighting result="spotlight" specularConstant="1.9" specularExponent="500" lighting-color="#FFF"> <fePointLight x="10" y="10" z="150" /> </feSpecularLighting> <feComposite in="Backgrou" in2="spotlight" operator="arithmetic" k1="3" k2="3" k3="1" k4="0" /> </filter> </defs> <image xlink:href= "C:/Users/pc/Desktop/gfg/capture42.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);" /> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <defs> <filter id="spotlight"> <feSpecularLighting result="spotlight" specularConstant="1.5" specularExponent="80" lighting-color="#FFF"> <fePointLight x="20" y="20" z="200" /> </feSpecularLighting> <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" /> </filter> </defs> <image xlink:href= "C:/Users/pc/Desktop/gfg/capture25.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);" /> </svg> </body> </html>
Salida :
Ejemplo 3:
HTML
<!DOCTYPE html> <html> <body> <svg width="200" height="200"> <defs> <filter id="spotlight"> <feSpecularLighting result="spotlight" specularConstant="1.5" specularExponent="80" lighting-color="#FFF"> <fePointLight x="12" y="12" z="120" /> </feSpecularLighting> <feComposite in="SourceGraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" /> </filter> </defs> <image xlink:href= "C:/Users/pc/Desktop/gfg/capture14.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);" /> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por epistler_999 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA