SVG FEOffset.in1 Propiedad

La propiedad SVG FEOffset.in1 devuelve el objeto SVGAnimatedString correspondiente al componente in1 del elemento FEOffset.in1.

Sintaxis:

var a = FEOffset.in1

Valor devuelto: esta propiedad devuelve el objeto SVGAnimatedString correspondiente al componente in1 del elemento FEOffset.in1.

Ejemplo 1: 

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg width="400" height="400">
        <defs>
            <filter id="filter2" x="0" y="0" 
                width="150%" height="150%">
                  
                <feOffset result="offOut" dx="30" 
                    dy="30" in="SourceGraphic" id="gfg" />
                  
                <feGaussianBlur in1="blurOut" 
                    in="offOut" stdDeviation="10" />
                  
                <feBlend in="SourceGraphic" 
                    in2="blurOut" mode="normal" />
            </filter>
        </defs>
  
        <g>
            <rect x="50" y="50" width="150" 
                height="150" fill="gray" 
                filter="url(#filter2)" />
        </g>
  
        <script type="text/javascript">
            var g = document.getElementById("gfg");
            console.log(g.in1)
            console.log("in1 value is : ", g.in1.baseVal)
        </script>
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2: 

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg width="400" height="400">
        <defs>
            <filter id="filter2" x="0" y="0"
                width="150%" height="150%">
                  
                <feOffset result="offOut" dx="30" 
                    dy="30" in="SourceGraphic" id="gfg" />
                  
                <feBlend in="SourceGraphic" 
                    in2="blurOut" mode="normal" />
            </filter>
        </defs>
  
        <g>
            <rect x="50" y="50" width="150" 
                height="150" stroke="black" 
                stroke-width="5" fill="gray"
                filter="url(#filter2)" />
        </g>
  
        <script type="text/javascript">
            var g = document.getElementById("gfg");
            console.log(g.in1);
            console.log("in1 value is : ", g.in1.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 *