SVG Füllfarbe Transparenz / Alpha?

Question

Ist es möglich, eine Transparenz- oder Alphastufe für SVG-Füllfarben festzulegen?

Ich habe versucht, dem Fill-Tag zwei Werte hinzuzufügen (indem ich es von fill="#044B94" a fill="#044B9466" ), aber das funktioniert nicht.

Answer 1

Sie verwenden ein zusätzliches Attribut; fill-opacity : Dieses Attribut nimmt eine Dezimalzahl zwischen 0,0 und 1,0 an, wobei 0,0 völlig transparent ist.

Zum Beispiel:

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

Zusätzlich haben Sie die folgenden Möglichkeiten:

• stroke-opacity Attribut für den Strich
• opacity für das gesamte Objekt

Answer 2

Als noch nicht vollständig standardisierte Lösung (wenn auch im Einklang mit der Farbsyntax in CSS3) können Sie z.B. verwenden fill="rgba(124,240,10,0.5)" . Funktioniert gut in Firefox, Opera, Chrome.

Hier ein Beispiel .

Answer 3

Um eine Füllung vollständig transparent zu machen, fill="transparent" scheint in modernen Browsern zu funktionieren. Aber es funktionierte nicht in Microsoft Word (für Mac), ich musste die fill-opacity="0" .

Answer 4

fill="#044B9466"

Dies ist ein RGBA-Farbe in Hex-Notation innerhalb der SVG, definiert mit Hex-Werten. Dies ist gültig, aber nicht alle Programme können es richtig anzeigen...

Die Browserunterstützung für diese Syntax finden Sie hier: https://caniuse.com/#feat=css-rrggbbaa

Stand: August 2017: RGBA-Füllfarben werden in Mozilla Firefox (54), Apple Safari (10.1) und in der "Schnellansicht" des Mac OS X Finders korrekt angezeigt. Google Chrome unterstützt diese Syntax jedoch erst ab Version 62 (zuvor wurde sie ab Version 54 unterstützt, wenn das Flag "Experimentelle Plattformfunktionen" aktiviert war).

Ab April 2021, Inkscape Version 1.0.2 kann dieses Format in SVG-Dateien nicht lesen und wandelt stattdessen jede RGBA-Farbe in deckendes Schwarz um. Der Fehlerbericht ist hier: https://gitlab.com/inkscape/inbox/-/issues/1195

Answer 5

Attribut verwenden fill-opacity in Ihrem SVG-Element.

Der Standardwert ist 1, das Minimum ist 0, in Stufen werden Dezimalwerte verwendet, z. B. 0,5 = 50% von Alpha. Hinweis: Es ist notwendig, Folgendes zu definieren fill Farbe zum Auftragen fill-opacity .

Siehe mein Beispiel .

Referenzen .