it-swarm.com.de

SVG-Füllfarbe Transparenz/Alpha?

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

Ich habe versucht, zwei Werte zum fill-Tag hinzuzufügen (es wurde von fill = "# 044B94" in fill = "# 044B9466" geändert), aber das funktioniert nicht.

355
Ollie Glass

Sie verwenden ein zusätzliches Attribut. fill-opacity: Dieses Attribut benötigt eine Dezimalzahl zwischen 0,0 und 1,0 (einschließlich). wobei 0,0 vollständig transparent ist.

Zum Beispiel:

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

Zusätzlich haben Sie Folgendes:

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

Als noch nicht vollständig standardisierte Lösung (obwohl in Übereinstimmung mit der Farbsyntax in CSS3) können Sie beispielsweise fill="rgba(124,240,10,0.5)" verwenden. Funktioniert gut in Firefox, Opera und Chrome.

Hier ist ein Beispiel .

71
Erik Dahlström
fill="#044B9466"

Dies ist eine RGBA-Farbe Hex-Notation innerhalb des SVG, die mit Hex-Werten definiert ist. 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 unter Mozilla Firefox (54), Apple Safari (10.1) und Mac OS X Finders "Schnellansicht" korrekt angezeigt. Google Chrome hat diese Syntax jedoch erst in Version 62 unterstützt (zuvor wurde Version 54 mit aktiviertem Flag "Experimental Platform Features" unterstützt).

4
Mr-IDE

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

0
Brett Donald

Verwenden Sie das Attribut fill-opacity in Ihrem Element von SVG.

Der voreingestellte Wert ist 1, das Minimum ist 0. Verwenden Sie in Schritt die Dezimalwerte EX: 0,5 = 50% von Alpha. Hinweis: Sie müssen fill color definieren, um fill-opacity anzuwenden.

Siehe mein Beispiel .

Verweise .

0