colors - rect opacity svg

SVG relleno color transparencia/alfa? (4)

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

Aquí hay un ejemplo .

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

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

Utilice el atributo de fill-opacity en su elemento de SVG.

El valor predeterminado es 1, el mínimo es 0, en el paso use valores decimales EX: 0.5 = 50% de alfa. Nota: Es necesario definir el color de relleno para aplicar la opacidad alfa.

Mira mi ejemplo

References .

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:

atributo de stroke-opacity de trazo para el trazo
opacity para todo el objeto

fill="#044B9466"

Este es un color RGBA en notación hexadecimal dentro del SVG, definido con valores hexadecimales. Esto es válido, pero no todos los programas pueden mostrarlo correctamente ...

Puede encontrar el soporte del navegador para esta sintaxis aquí: https://caniuse.com/#feat=css-rrggbbaa

A partir de agosto de 2017: los colores de relleno RGBA se mostrarán correctamente en Mozilla Firefox (54), Apple Safari (10.1) y la "Vista rápida" de Mac OS X Finder. Sin embargo, Google Chrome no admitió esta sintaxis hasta la versión 62 (anteriormente era compatible con la versión 54 con la marca de Características de la plataforma experimental habilitada).