¿Es posible establecer una transparencia o nivel alfa en los colores de relleno SVG?SVG relleno de transparencia de color/alfa?
He intentado agregar dos valores a la etiqueta de relleno (cambiándolo de fill = "# 044B94" a fill = "# 044B9466"), pero esto no funciona.
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 de tener lo siguiente:
stroke-opacity atributo para la carreraopacity para todo el objetoComo aún no está completamente solución estandarizada (aunque en alineación w Con la sintaxis de color en CSS3) puede usar, por ejemplo, fill="rgba(124,240,10,0.5)". Funciona bien en Firefox, Opera, Chrome.
Mirando http://www.w3.org/TR/SVG/painting.html#FillProperties (desplácese hacia abajo un poco para fill-opacity); eso se ve bastante estandarizado para mí. –
@williham: sí fill-opacity está en la recomendación de SVG, y no hay problema con el uso de eso. La sintaxis de CSS3 está en Color CSS3, que está a un paso de convertirse en una recomendación de w3c. SVG 1.1 no hace referencia a CSS3 Color porque no estaba disponible en ese momento, una versión futura de SVG probablemente lo haga. –
Ah. Parece que leí mal su respuesta ya que "no hay una solución completamente estandarizada, pero: ..."; lo cual estaría mal. Todavía; el uso de rgba() parece un tanto inútil cuando tienes un valor de opacidad independiente para ajustar. –
fill="#044B9466"
Este es un RGBA color el interior del SVG, que se define con valores hexadecimales. Esto es válido, pero no todos los programas pueden mostrarlo correctamente ...
A partir de agosto de 2017: los colores de relleno de RGBA se mostrarán correctamente en Mozilla Firefox (54), Apple Safari (10.1) y la "Vista rápida" de Finder de Mac OS X. ". Sin embargo, Google Chrome (60.0) no muestra este color correctamente; solo lo mostrará como negro.
¿Sabes si cambiaron algo recientemente? Tenía una aplicación de Chrome que utilizaba fill: rgb (...) y ahora está completamente rota. ¡Apreciaría tu ayuda! – Mariodiar
La biblioteca Qt SVG (Qt 5.9.3) tampoco puede manejar los colores RGBA hasta el momento ni como forma hexadecimal "# 00000000" ni como "rgba". – bkausbk
MDN proporciona una buena visión general de este y otros atributos relacionados en su Tutorial de SVG, https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes –
también puede ponerlos en el atributo de estilo: