¿Transparencia de color de relleno SVG/alfa?

Resuelto Ollie Glass asked hace 13 años • 7 respuestas

¿Es posible establecer una transparencia o un nivel alfa en los colores de relleno SVG?

Intenté agregar dos valores a la etiqueta de relleno (cambiándola de fill="#044B94"a fill="#044B9466"), pero esto no funciona.

Ollie Glass avatar May 18 '11 16:05 Ollie Glass
Aceptado

Utiliza un atributo adicional; fill-opacity: Este atributo toma un número decimal entre 0,0 y 1,0, inclusive; donde 0.0 es completamente transparente.

Por ejemplo:

<rect ... fill="#044B94" fill-opacity="0.4"/>

Además tienes lo siguiente:

  • stroke-opacityatributo para el trazo
  • opacitypara todo el objeto
Williham Totland avatar May 18 '2011 09:05 Williham Totland

Como solución aún no completamente estandarizada (aunque en consonancia con la sintaxis de color en CSS3), puede utilizar, por ejemplo fill="rgba(124,240,10,0.5)", . Funciona bien en Firefox, Opera, Chrome.

He aquí un ejemplo .

Erik Dahlström avatar May 18 '2011 16:05 Erik Dahlström