Atributo de intercepción SVG

El atributo de intersección se utiliza para especificar la intersección de la función lineal del componente de color. Cabe señalar que el atributo de tipo se establece en lineal. Los elementos que utilizan este atributo incluyen: <feFuncA>, <feFuncB>, <feFuncG> y <feFuncR>.

Sintaxis:

intercept = "number"

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

número: Esto define un número entero o un número con algún componente fraccionario.

Nota: El valor predeterminado para el atributo de intercepción es 0.

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

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; margin-left: 35px;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="-60 0 1420 200" 
        xmlns="http://www.w3.org/2000/svg">
          
        <defs>
            <linearGradient id="geeky" 
                gradientUnits="userSpaceOnUse" 
                x1="0" y1="0" x2="200" y2="0">
                  
                <stop offset="0" stop-color="#00ff00" />
                <stop offset="0.5" stop-color="yellow" />
                <stop offset="1" stop-color="darkgreen" />
            </linearGradient>
        </defs>
  
        <filter id="geek1" width="100%" height="100%">
            <feComponentTransfer>
                <feFuncR type="linear" intercept="0" />
                <feFuncG type="linear" intercept="0" />
                <feFuncB type="linear" intercept="0" />
            </feComponentTransfer>
        </filter>
  
        <rect width="200" height="200" 
            fill="url(#geeky)" 
            style="filter:url(#geek1);" />
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green; margin-left: 35px;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="-60 0 1420 200" 
        xmlns="http://www.w3.org/2000/svg">
          
        <defs>
            <linearGradient id="geeky" 
                gradientUnits="userSpaceOnUse" 
                x1="0" y1="0" x2="200" y2="0">
                  
                <stop offset="0" stop-color="green" />
                <stop offset="0.5" stop-color="#FDBF2D" />
                <stop offset="1" stop-color="#FF0000" />
            </linearGradient>
        </defs>
  
        <filter id="geek2" width="100%" height="100%">
            <feComponentTransfer>
                <feFuncR type="linear" intercept="0.1" />
                <feFuncG type="linear" intercept="0.1" />
                <feFuncB type="linear" intercept="0.1" />
            </feComponentTransfer>
        </filter>
  
        <rect width="200" height="200" 
            fill="url(#geeky)" 
            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

HTML

HTML

Deja una respuesta Cancelar la respuesta