Transparência de cor de preenchimento SVG / alfa?

416

É possível definir um nível de transparência ou alfa nas cores de preenchimento SVG?

Tentei adicionar dois valores à tag de preenchimento (alterá-la de fill="#044B94"para fill="#044B9466"), mas isso não funciona.

colors svg transparency alpha fill Ollie Glass
fonte
Para quem estiver interessado, para receber cliques mais de um preenchimento vazio: ver SVG Detectar Onclick eventos do “preenchimento: nenhum” - ou seja, a possibilidade de uso fill="none"com pointer-events="visible".
Fabien Snauwaert

Respostas:

645

Você usa um atributo adicional; fill-opacity: Esse atributo assume um número decimal entre 0,0 e 1,0, inclusive; onde 0.0 é completamente transparente.

Por exemplo:

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

Além disso, você tem o seguinte:

  • stroke-opacity atributo para o traçado
  • opacity para todo o objeto
Williham Totland
fonte
3
O MDN fornece uma boa visão geral deste e de outros atributos relacionados em seu Tutorial SVG, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…
t-mart
4
você também pode colocá-los no atributo style: <rect style = "fill: # 044B94; opacidade de preenchimento: 0,4;" />
PeterVermont
Acima, "opacidade de preenchimento" e "opacidade de acidente vascular cerebral" devem ser substituídas por "opacidade de preenchimento" e "capacidade de acidente vascular cerebral" (ou seja, substitua hífens por sublinhados).
mermaldad 6/06
1
@mermaldad Isso está incorreto; veja a especificação . Em algumas linguagens que não permitem que nomes contenham hífens, as bibliotecas para trabalhar com SVG usam nomes como fill_opacity, mas em SVG e CSS, é fill-opacity.
Williham Totland
@WillihamTotland, obrigado pela correção. Eu pulei mentalmente direto para "como implementar isso usando svgwrite em Python". Lá você precisa substituir os hífens por sublinhados.
mermaldad 11/06
78

Como uma solução ainda não totalmente padronizada (embora alinhada com a sintaxe de cores no CSS3), você pode usar, por exemplo fill="rgba(124,240,10,0.5)". Funciona bem no Firefox, Opera, Chrome.

Aqui está um exemplo .

Erik Dahlström
fonte
3
Observando w3.org/TR/SVG/painting.html#FillProperties (role um pouco para baixo para verificar a opacidade de preenchimento); isso parece totalmente padronizado para mim.
Williham Totland
10
@ williham: sim, a opacidade de preenchimento está na recomendação SVG, e não há problema em usá-lo. A sintaxe do CSS3 está no CSS3 Color, a um passo de se tornar uma recomendação do w3c. O SVG 1.1 não faz referência ao CSS3 Color porque não estava disponível no momento, provavelmente uma versão futura do SVG o fará.
Erik Dahlström
7
Só quero mencionar, um lugar onde isso não parece trabalho está em Inkscape
George Mauer
2
Usei esta solução no Highcharts e funcionou. É convertido rgbapara rgbe automaticamente adicionado o fill-opacityatributo a ele. Não tenho certeza se é assim que funciona em SVGs normais também, mas é assim que funcionou lá. De qualquer forma, obrigado.
21414 Hanna
3
Posso obter algum esclarecimento sobre quais navegadores realmente suportam rgba em svgs inline?
Redanimalwar 9/12/16
6 
fill="#044B9466"

Essa é uma cor RGBA em notação hexadecimal dentro do SVG, definida com valores hexadecimais. Isso é válido, mas nem todos os programas podem exibi-lo corretamente ...

Você pode encontrar o suporte do navegador para esta sintaxe aqui: https://caniuse.com/#feat=css-rrggbbaa

A partir de agosto de 2017: as cores de preenchimento RGBA serão exibidas corretamente no Mozilla Firefox (54), Apple Safari (10.1) e no "Quick View" do Mac OS X Finder. No entanto, o Google Chrome não suportava essa sintaxe até a versão 62 (anteriormente era suportada na versão 54 com o sinalizador Recursos da plataforma experimental ativado).

Mr-IDE
fonte
Você sabe se eles mudaram alguma coisa recentemente? Eu tinha um aplicativo chrome funcional que usava fill: rgb (...) e agora está completamente quebrado. Agradecemos sua ajuda!
Mariodiar 16/08
A biblioteca Qt SVG (Qt 5.9.3) também não pode lidar com cores RGBA até agora, nem na forma hexagonal "# 00000000" nem como "rgba".
bkausbk
2

Para tornar um preenchimento completamente transparente, fill="transparent"parece funcionar em navegadores modernos. Mas não funcionou no Microsoft Word (para Mac), eu tive que usar fill-opacity="0".

Brett Donald
fonte
Para o editor de gráficos vetoriais Inkscape 0.92.4.0 , fill="none"funciona, mas fill="transparent"não.
samm
1

Use o atributo fill-opacityem seu elemento do SVG.

O valor padrão é 1, o mínimo é 0, na etapa, use valores decimais EX: 0,5 = 50% de alfa. Nota: É necessário definir a fillcor a aplicar fill-opacity.

Veja meu exemplo .

Referências .

Darlan Dieterich
fonte