SVG relleno color transparencia / alfa?

416

¿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.

colors svg transparency alpha fill Ollie Glass
fuente
Para cualquier persona interesada, para recibir clics sobre un relleno vacío: consulte SVG Detectar eventos Onclick en "fill: none" , es decir, la posibilidad de usar fill="none"con pointer-events="visible".
Fabien Snauwaert

Respuestas:

645

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-opacity atributo para el trazo
  • opacity para todo el objeto
Williham Totland
fuente
3
MDN ofrece una buena visión general de este y otros atributos relacionados en su Tutorial SVG, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…
t-mart
44
también puede ponerlos en el atributo de estilo: <rect style = "fill: # 044B94; fill-opacity: 0.4;" />
PeterVermont
En lo anterior, "fill-opacity" y "stroke-opacity" deben reemplazarse por "fill_opacity" y "stroke_opacity" (es decir, reemplazar guiones con guiones bajos).
mermaldad
1
@mermaldad Eso es incorrecto; ver la especificación . En algunos idiomas que no permiten que los nombres contengan guiones, las bibliotecas para trabajar con SVG usan nombres como fill_opacity, pero en SVG y CSS, es fill-opacity.
Williham Totland
@WillihamTotland, gracias por la corrección. Salté mentalmente directamente a "¿Cómo implemento esto usando svgwrite en Python"? Allí debe reemplazar los guiones con guiones bajos.
Mermaldad
78

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 .

Erik Dahlström
fuente
3
Mirando w3.org/TR/SVG/painting.html#FillProperties (desplácese un poco hacia abajo para ver la opacidad de relleno); eso se ve bastante estandarizado para mí.
Williham Totland
10
@williham: sí, la opacidad de relleno está en la recomendación de SVG, y no hay ningún problema con su uso. La sintaxis CSS3 está en CSS3 Color, que está a un paso de convertirse en una recomendación w3c. SVG 1.1 no hace referencia al color CSS3 porque no estaba disponible en ese momento, una versión futura de SVG probablemente sí.
Erik Dahlström
77
Solo quiero mencionar, un lugar donde esto no parece funcionar es Inkscape
George Mauer
2
Usé esta solución en Highcharts, y funcionó. Se convierte rgbaa rgby automáticamente añade el fill-opacityatributo a ella. No estoy seguro si así es como funciona también en SVG normales, pero así fue como funcionó allí. De cualquier manera, gracias.
Hanna
3
¿Puedo aclarar qué navegadores realmente admiten rgba en svgs en línea?
redanimalwar
6 
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 de 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 desde la versión 54 con el indicador de Características de la plataforma experimental habilitado).

Mr-IDE
fuente
¿Sabes si cambiaron algo recientemente? Tenía una aplicación de Chrome que funcionaba con fill: rgb (...) y ahora está completamente rota. ¡Te agradecería tu ayuda!
Mariodiar
La biblioteca Qt SVG (Qt 5.9.3) tampoco puede manejar colores RGBA hasta ahora ni como forma hexadecimal "# 00000000" ni como "rgba".
bkausbk
2

Para hacer un relleno completamente transparente, fill="transparent"parece funcionar en los navegadores modernos. Pero no funcionó en Microsoft Word (para Mac), tuve que usar fill-opacity="0".

Brett Donald
fuente
Para el editor de gráficos vectoriales Inkscape 0.92.4.0 , fill="none"funciona, pero fill="transparent"no lo hace.
Samm
1

Use el atributo fill-opacityen 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 fillcolor para aplicar fill-opacity.

Mira mi ejemplo .

Referencias .

Darlan Dieterich
fuente