Atributo de opacidad de inundación SVG

El atributo flood-opacity indica el valor de opacidad que se utilizará en la subregión primitiva de filtro actual.

Sintaxis:

flood-opacity="flood"

Valores de atributos:

inundación: un número o porcentaje que indica el valor de opacidad que se utilizará en la subregión primitiva de filtro actual

Usaremos el atributo de opacidad de relleno para establecer la opacidad del color de relleno.

Ejemplo 1:

<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 1000 500" 
        xmlns="http://www.w3.org/2000/svg">
          
        <filter id="flood1">
            <feFlood flood-color="green" 
                x="40" y="40" width="200" 
                height="200" />
        </filter>
  
        <filter id="flood2">
            <feFlood flood-color="green" 
                flood-opacity="0.3" x="300" 
                y="40" width="200" 
                height="200" />
        </filter>
  
        <rect x="100" y="100" 
            width="1000" height="1000" 
            style="filter: url(#flood1);" />
  
        <rect x="100" y="100" 
            width="1000" height="1000" 
            style="filter: url(#flood2);" />
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2:

<!DOCTYPE html>
<html>
    <body>
        <svg viewBox="0 0 700 500"
             xmlns="http://www.w3.org/2000/svg">
            <filter id="flood1">
                <feFlood flood-color="blue" 
                         x="50" y="50"
                         width="200" 
                         height="300" />
            </filter>
            <filter id="flood2">
                <feFlood flood-color="blue"
                         flood-opacity="0.2" 
                         x="300" y="50"
                         width="200" 
                         height="300" />
            </filter>
  
            <rect x="100" y="100" 
                  width="1000" 
                  height="1000" 
                  style="filter: url(#flood1);" />
            <rect x="100" y="100" 
                  width="1000"
                  height="1000" 
                  style="filter: url(#flood2);" />
        </svg>
    </body>
</html>

Producción:

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 Cancelar la respuesta