Solución:
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
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.
He aquí un ejemplo.
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 se admitía a partir de la versión 54 con la marca de características de plataforma experimental habilitada).