Atributo de opacidad de relleno SVG

El atributo de opacidad de relleno es un atributo de presentación que define la opacidad de la pintura aplicada a una forma.

Sintaxis:

fill-opacity="colour"

Valores de atributos:

decimal: Valor decimal en el que queremos que nuestro elemento sea opaco.
porcentaje: Porcentaje en el que queremos establecer el atributo de relleno-opacidad.

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 400 100" 
         xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="35" fill="green"/>
  
        <circle cx="150" cy="50" r="35" fill="green"
        fill-opacity="0.7" />
    </svg>
</body> 
  
</html>

Producción:

Ejemplo 2:

<!DOCTYPE html> 
<html> 
  
<body> 
    <svg viewBox="0 0 400 100"
        xmlns="http://www.w3.org/2000/svg">
        <circle cx="60" cy="60" r="40" fill="black"/>
  
        <circle cx="150" cy="60" r="40" fill="black"
        fill-opacity="25%" />
    </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