SVG feDiffuseElemento de iluminación

La primitiva de filtro SVG <feDiffuseLighting> ilumina una imagen utilizando el canal alfa como un mapa de relieve. Usando iluminación difusa, los lados del objeto que miran hacia la luz son más brillantes y los lados que miran hacia el otro lado son más oscuros y en la sombra.

Sintaxis:

<feDiffuseLighting> Contents... </feDiffuseLighting>

Atributos:

in — El atributo in identifica la entrada para la primitiva de filtro dada.
surfaceScale — Representa la altura de la superficie. Su valor se multiplica por el valor alfa. El valor predeterminado es 1.
difusaConstante: es un número no negativo cuyo valor predeterminado es 1.
kernelUnitLength : indica la distancia prevista entre columnas y filas sucesivas en kernelMatrix. La distancia prevista se representa en unidades de filtro actuales. El valor predeterminado es 1.

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000">
        <filter id="lightMe2">
            <feDiffuseLighting in="SourceGraphic"
                surfaceScale="1" diffuseConstant="2" 
                kernelUnitLength="2">
  
                <fePointLight x="80" y="80" z="40" />
  
                <feDistantLight azimuth="240" 
                    elevation="20" />
            </feDiffuseLighting>
  
            <feComposite in="SourceGraphic" in2="light"
                operator="arithmetic" k1="1" k2="0" 
                k3="0" k4="0" />
        </filter>
  
        <rect x="20" y="20" width="200" height="200" 
            fill="green" 
            style="filter: url(#lightMe2);" />
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 1000">
        <filter id="lightMe3">
            <feDiffuseLighting in="BackgroundImage"
                surfaceScale="4" diffuseConstant="2"
                kernelUnitLength="2">
  
                <feSpotLight x="30" y="20" z="30" 
                    limitingConeAngle="40" 
                    pointsAtX="200" pointsAtY="200"
                    pointsAtZ="0" />
  
                <fePointLight x="80" y="80" z="40" />
            </feDiffuseLighting>
  
            <feComposite in="SourceGraphic" 
                in2="light" operator="arithmetic" 
                k1="1" k2="0" k3="0" k4="0" />
        </filter>
  
        <rect x="20" y="20" width="200" height="200" 
            fill="blue" 
            style="filter: url(#lightMe3);" />
    </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

HTML

HTML

Deja una respuesta Cancelar la respuesta