Propiedad SVG FESpecularLighting.specularConstant

La propiedad FESpecularLighting.specularConstant de SVG devuelve el objeto SVGAnimatedNumber correspondiente al componente specularConstant del elemento FESpecularLighting.specularConstant.

Sintaxis:

var a = FESpecularLighting.specularConstant

Valor devuelto: esta propiedad devuelve el objeto SVGAnimatedNumber correspondiente al componente specularConstant del elemento FESpecularLighting.specularConstant.

Ejemplo 1: 

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg height="200" width="200" 
        viewBox="0 0 220 220">
  
        <filter id="filter">
  
            <feSpecularLighting in="BackgroundImage" 
                specularConstant="0.8" surfaceScale="1"
                specularExponent="20" kernelUnitLength="1" 
                lighting-color="red" id="gfg">
  
                <fePointLight x="100" y="100" z="220" />
            </feSpecularLighting>
  
            <feComposite in="SourceGraphic" in2="specOut"
                operator="arithmetic" k1="0" k2="1" 
                k3="1" k4="0" />
        </filter>
  
        <rect x="60" y="60" width="150" height="150" 
            style="stroke: #000000; fill: lightgreen; 
            filter: url(#filter);" />
  
        <script type="text/javascript">
            var g = document.getElementById("gfg");
            console.log(g.specularConstant);
  
            console.log("specularConstant value is : ",
                g.specularConstant.baseVal)
        </script>
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2: 

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg height="200" width="200">
        <filter id="filter">
  
            <feSpecularLighting specularExponent="5" 
                lighting-color="gold" result="light" 
                surfaceScale="5" in="SourceGraphic" 
                specularConstant="1.3" id="gfg">
  
                <fePointLight x="100" y="100" z="100" />
            </feSpecularLighting>
  
            <feComposite in="SourceGraphic" 
                in2="specOut" operator="arithmetic" 
                k1="1" k2="0" k3="1" k4="0" />
        </filter>
  
        <rect x="1" y="1" width="200" height="200" 
            style="stroke: #000000; fill: green; 
            filter: url(#filter);" />
  
        <rect x="50" y="50" width="100" height="100" 
            style="stroke: #000000; fill: green; 
            filter: url(#filter);" />
  
        <g fill="#FFFFFF" stroke="black" font-size="10" 
            font-family="Verdana" />
  
        <text x="60" y="100">GeeksForGeeks</text>
  
        <script type="text/javascript">
            var g = document.getElementById("gfg");
            console.log(g.specularConstant);
  
            console.log("specularConstant value is : ", 
                g.specularConstant.baseVal)
        </script>
    </svg>
</body>
  
</html>

Producción:

Ejemplo 3: 

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg height="200" width="200" 
        viewBox="0 0 220 220">
  
        <filter id="filter">
  
            <feSpecularLighting specularExponent="2" 
                lighting-color="shadow" result="light" 
                surfaceScale="6" in="BackgroundImage" 
                specularConstant="5" id="gfg">
  
                <fePointLight x="200" y="200" z="100" />
            </feSpecularLighting>
  
            <feComposite in="SourceGraphic" in2="specOut"
                operator="arithmetic" k1="0" k2="1" 
                k3="1" k4="0" />
        </filter>
  
        <rect x="40" y="40" width="200" height="200" 
            style="stroke: black; fill: green; 
            filter: url(#filter);" />
  
        <circle cx="130" cy="130" r="50" 
            style="fill: black; filter:url(#filter)" />
  
        <script type="text/javascript">
            var g = document.getElementById("gfg");
            console.log(g.specularConstant);
  
            console.log("specularConstant value is : ", 
                g.specularConstant.baseVal)
        </script>
    </svg>
</body>
  
</html>

Producción:

Navegadores compatibles:

  • Google Chrome
  • Borde
  • Firefox
  • Safari
  • Ópera
  • explorador de Internet

Publicación traducida automáticamente

Artículo escrito por taran910 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 *