Elemento fePointLight de SVG

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *