Trasparenza colore riempimento SVG / alfa?

416

È possibile impostare un livello di trasparenza o alfa sui colori di riempimento SVG?

Ho provato ad aggiungere due valori al tag di riempimento (modificandolo da fill="#044B94"a fill="#044B9466"), ma questo non funziona.

— Ollie Glass
fonte

Per chiunque sia interessato, di ricevere clic più di un riempimento vuoto: vedi SVG Detect Onclick eventi sul tema “fill: none” - vale a dire la possibilità di utilizzare fill="none"con pointer-events="visible".

— Fabien Snauwaert,

645

Si utilizza un attributo aggiuntivo; fill-opacity: Questo attributo accetta un numero decimale compreso tra 0,0 e 1,0, incluso; dove 0.0 è completamente trasparente.

Per esempio:

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

Inoltre hai quanto segue:

stroke-opacity attributo per il tratto
opacity per l'intero oggetto

— Williham Totland
fonte

3

MDN offre una buona panoramica di questo e altri attributi correlati nel loro tutorial SVG, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…

— t-mart,

4

puoi anche metterli nell'attributo style: <rect style = "fill: # 044B94; fill-opacity: 0.4;" />

— PeterVermont,

In quanto sopra, "riempimento-opacità" e "tratto-opacità" dovrebbero essere sostituiti con "riempimento_opacità" e "tratto_opacità" (vale a dire, sostituire trattini con caratteri di sottolineatura).

— mermaldad,

1

@mermaldad Quello non è corretto; vedi le specifiche . In alcune lingue che non consentono ai nomi di contenere trattini, le librerie per lavorare con SVG usano nomi come fill_opacity, ma in SVG e CSS lo è fill-opacity.

— Williham Totland,

@WillihamTotland, grazie per la correzione. Ho saltato mentalmente dritto a "come posso implementarlo usando svgwrite in Python". Lì devi sostituire i trattini con caratteri di sottolineatura.

— mermaldad,

78

Come soluzione non ancora completamente standardizzata (sebbene in linea con la sintassi del colore in CSS3) puoi usare ad es fill="rgba(124,240,10,0.5)". Funziona bene su Firefox, Opera, Chrome.

Ecco un esempio .

— Erik Dahlström
fonte

3

Guardando w3.org/TR/SVG/painting.html#FillProperties (scorrere un po 'verso il basso per riempire l'opacità); mi sembra abbastanza completamente standardizzato.

— Williham Totland,

10

@williham: sì, l'opacità di riempimento è nella raccomandazione SVG, e non c'è alcun problema nell'usarlo. La sintassi CSS3 è in CSS3 Color, che è a un passo dal diventare una raccomandazione w3c. SVG 1.1 non fa riferimento a CSS3 Color perché non era disponibile al momento, probabilmente una versione futura di SVG.

— Erik Dahlström,

7

Voglio solo menzionare, un posto dove questo sembra non funzionare è in Inkscape

— George Mauer,

2

Ho usato questa soluzione su Highcharts e ha funzionato. Si è convertito rgbain rgbe ha aggiunto automaticamente l' fill-opacityattributo ad esso. Non sono sicuro che funzioni così anche nei normali SVG, ma è così che ha funzionato lì. Ad ogni modo, grazie.

— Hanna,

3

Posso avere qualche chiarimento su quali browser supportano effettivamente rgba in svgs in linea?

— Redanimalwar,

6

fill="#044B9466"

Questo è un colore RGBA in notazione esadecimale all'interno dell'SVG, definito con valori esadecimali. Questo è valido, ma non tutti i programmi possono visualizzarlo correttamente ...

Puoi trovare il supporto del browser per questa sintassi qui: https://caniuse.com/#feat=css-rrggbbaa

A partire da agosto 2017: i colori di riempimento RGBA verranno visualizzati correttamente su "Quick View" di Mozilla Firefox (54), Apple Safari (10.1) e Mac OS X Finder. Tuttavia, Google Chrome non supportava questa sintassi fino alla versione 62 (era precedentemente supportata dalla versione 54 con il flag Caratteristiche della piattaforma sperimentale abilitato).

— Mr-IDE
fonte

Sai se hanno cambiato qualcosa di recente? Avevo un'applicazione Chrome funzionante che utilizzava fill: rgb (...) e ora è completamente rotta. Ti ringrazio per il tuo aiuto!

— Mariodiar,

Anche la libreria Qt SVG (Qt 5.9.3) non può gestire i colori RGBA né in forma esadecimale "# 00000000" né in "rgba".

— bkausbk,

2

Per rendere un riempimento completamente trasparente, fill="transparent"sembra funzionare nei browser moderni. Ma non ha funzionato in Microsoft Word (per Mac), ho dovuto usare fill-opacity="0".

— Brett Donald
fonte

Per l' editor di grafica vettoriale Inkscape 0.92.4.0 , fill="none"funziona, ma fill="transparent"non lo fa.

— sabato

1

Usa l'attributo fill-opacitynel tuo elemento di SVG.

Il valore predefinito è 1, il minimo è 0, al passaggio utilizzare i valori decimali EX: 0,5 = 50% dell'alfa. Nota: è necessario definire il fillcolore da applicare fill-opacity.

Vedere il mio esempio .

Riferimenti .

— Darlan Dieterich
fonte