SVG Füllfarbentransparenz / Alpha?

416

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

Ich habe versucht , zwei Werte an die fill - Tag hinzugefügt (es ändert fill="#044B94"zu fill="#044B9466"), aber das funktioniert nicht.

colors svg transparency alpha fill Ollie Glass
quelle
Für alle Interessierten, die Klicks über eine leere Füllung erhalten möchten : Siehe SVG Detect Onclick-Ereignisse unter „Füllung: keine“ - dh die Möglichkeit zur Verwendung fill="none"mit pointer-events="visible".
Fabien Snauwaert

Antworten:

645

Sie verwenden ein zusätzliches Attribut. fill-opacity: Dieses Attribut hat eine Dezimalzahl zwischen einschließlich 0,0 und 1,0. 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
Williham Totland
quelle
3
MDN bietet einen guten Überblick über dieses und andere verwandte Attribute in ihrem SVG-Tutorial, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…
t-mart
4
Sie können diese auch in das style-Attribut einfügen: <rect style = "fill: # 044B94; fill-opacity: 0.4;" />
PeterVermont
Oben sollten "Füllopazität" und "Strichopazität" durch "Füllopazität" und "Strichopazität" ersetzt werden (dh Bindestriche durch Unterstriche ersetzen).
Mermaldad
1
@mermaldad Das ist falsch; siehe die Spezifikation . In einigen Sprachen, in denen Namen keine Bindestriche enthalten dürfen, verwenden Bibliotheken für die Arbeit mit SVG Namen wie fill_opacity, in SVG und CSS jedoch fill-opacity.
Williham Totland
@ WillihamTotland, danke für die Korrektur. Ich sprang mental direkt zu "Wie implementiere ich das mit svgwrite in Python?". Dort müssen Sie die Bindestriche durch Unterstriche ersetzen.
Mermaldad vor
78

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

Hier ist ein Beispiel .

Erik Dahlström
quelle
3
Schauen Sie sich w3.org/TR/SVG/painting.html#FillProperties an (scrollen Sie ein wenig nach unten, um die Deckkraft zu füllen); das sieht für mich ziemlich standardisiert aus.
Williham Totland
10
@williham: Ja, die Deckkraft der Füllung ist in der SVG-Empfehlung enthalten, und es gibt kein Problem damit. Die CSS3-Syntax ist in CSS3-Farbe, was einen Schritt davon entfernt ist, eine w3c-Empfehlung zu werden. SVG 1.1 verweist nicht auf CSS3 Color, da es zu diesem Zeitpunkt noch nicht verfügbar war. Eine zukünftige Version von SVG wird dies wahrscheinlich tun.
Erik Dahlström
7
Ich möchte nur erwähnen, dass ein Ort, an dem dies nicht zu funktionieren scheint, in Inkscape ist
George Mauer
2
Ich habe diese Lösung auf Highcharts verwendet und sie hat funktioniert. Es wurde rgbain rgbdas fill-opacityAttribut konvertiert und automatisch hinzugefügt . Ich bin mir nicht sicher, ob es auch in normalen SVGs so funktioniert, aber so hat es dort funktioniert. Wie auch immer, danke.
Hanna
3
Kann ich etwas Klarheit darüber bekommen, welche Browser rgba in Inline-SVGs tatsächlich unterstützen?
Redanimalwar
6 
fill="#044B9466"

Dies ist eine RGBA-Farbe in Hex-Notation innerhalb der 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

Ab August 2017: RGBA-Füllfarben werden in Mozilla Firefox (54), Apple Safari (10.1) und Mac OS X Finders "Schnellansicht" ordnungsgemäß angezeigt. Google Chrome unterstützte diese Syntax jedoch erst in Version 62 (wurde zuvor ab Version 54 mit aktiviertem Flag "Experimental Platform Features" unterstützt).

Mr-IDE
quelle
Wissen Sie, ob sie kürzlich etwas geändert haben? Ich hatte eine funktionierende Chrome-Anwendung, die fill: rgb (...) verwendete, und jetzt ist sie komplett kaputt. Ich würde mich über Ihre Hilfe freuen!
Mariodiar
Die Qt-SVG-Bibliothek (Qt 5.9.3) kann RGBA-Farben bisher weder als Hex-Form "# 00000000" noch als "rgba" verarbeiten.
Bkausbk
2

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 verwenden fill-opacity="0".

Brett Donald
quelle
Für Inkscape Vektor - Grafik - Editor 0.92.4.0 , fill="none"funktioniert, aber fill="transparent"nicht.
Samm
1

Verwenden Sie das Attribut fill-opacityin Ihrem SVG-Element.

Der Standardwert ist 1, das Minimum ist 0, im Schritt werden Dezimalwerte EX verwendet: 0,5 = 50% von Alpha. Hinweis: Es ist erforderlich, die fillanzuwendende Farbe zu definieren fill-opacity.

Siehe mein Beispiel .

Referenzen .

Darlan Dieterich
quelle