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.

— 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

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