Atributo de color de iluminación SVG

El atributo de color de iluminación representa el color de la fuente de luz para las primitivas de filtro de iluminación. Los elementos que usan este atributo incluyen <feDiffuseLighting> y <feSpecularLighting>

Sintaxis:

lighting-color ="color"

Valores de atributo: el atributo de color de iluminación acepta los valores mencionados anteriormente y descritos a continuación.

  • color: Representa la parte decorativa y textual del elemento.

Nota: El valor predeterminado de color de iluminación es blanco.

Los siguientes ejemplos ilustran el uso del atributo de color de iluminación .

Ejemplo 1:

<!DOCTYPE html> 
<html> 
  
    <body> 
        <h1 style="color: green; 
            margin-left: -5px;
            font-size: 25px;"> 
            GeeksforGeeks 
        </h1> 
        <svg viewBox="0 0 1280 200" 
             xmlns="http://www.w3.org/2000/svg">
  
             <filter id="geek1" x="0" y="0" 
                width="100%" height="100%">
                <feDiffuseLighting in="SourceGraphic" 
                  lighting-color="green">
                  <fePointLight x="100" y="100" z="10"/>
                </feDiffuseLighting>
              </filter>
  
              <rect width="200" height="200" 
                    style="filter: url(#geek1);"/>
          </svg>
    </body>
       
</html>

Producción:

Ejemplo 2:

<!DOCTYPE html> 
<html> 
  
    <body> 
        <h1 style="color: green; 
            margin-left: -5px;
            font-size: 25px;"> 
            GeeksforGeeks 
        </h1> 
        <svg viewBox="0 0 1280 200" 
             xmlns="http://www.w3.org/2000/svg">
  
             <filter id="geek2" x="0" y="0" 
                 width="100%" height="100%">
                <feDiffuseLighting in="SourceGraphic" 
                   lighting-color="yellow">
                  <fePointLight x="150" y="150" z="60"/>
                </feDiffuseLighting>
              </filter>
            
              <rect width="200" height="200" 
                    style="filter: url(#geek2);"/>
          </svg>
    </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

Deja una respuesta

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