Atributo de desviación estándar de SVG

El atributo stdDeviation explica la desviación estándar para la operación de desenfoque. Solo el elemento <feGaussianBlur> está usando este atributo.

Sintaxis:

stdDeviation = <number-optional-number>

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

número-opcional-número: Es un par de números. El primer número indica el valor de desviación estándar a lo largo del eje X. El segundo valor denota el valor de desviación estándar a lo largo del eje Y. Si solo se proporciona un valor, se considera una desviación estándar a lo largo de ambos ejes.

Nota: El valor predeterminado para stdDeviation es 0.

Ejemplo 1: El siguiente ejemplo ilustra el uso de stdDeviation cuando su valor es 1

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="-10 10 680 400" 
        xmlns="http://www.w3.org/2000/svg">
  
        <filter id="geek1">
            <feGaussianBlur stdDeviation="1" />
        </filter>
  
        <polygon points="50 15, 100 100, 0 100"
            fill="green" 
            style="filter: url(#geek1);" />
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2: El siguiente ejemplo ilustra el uso de stdDeviation cuando su valor es 4.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="-10 10 680 400" 
        xmlns="http://www.w3.org/2000/svg">
  
        <filter id="geek2">
            <feGaussianBlur stdDeviation="4" />
        </filter>
  
        <polygon points="50 15, 100 100, 0 100"
            fill="green" 
            style="filter: url(#geek2);" />
    </svg>
</body>
  
</html>

Producción:

Ejemplo 3: El siguiente ejemplo ilustra el uso de stdDeviation cuando su valor es 8

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="-10 10 680 400" 
        xmlns="http://www.w3.org/2000/svg">
  
        <filter id="geek3" x="-30%" y="-30%" 
            width="160%" height="160%">
            <feGaussianBlur stdDeviation="8" />
        </filter>
  
        <polygon points="50 15, 100 100, 0 100" 
            fill="green" 
            style="filter: url(#geek3);" />
    </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

HTML

Deja una respuesta Cancelar la respuesta