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.

— 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

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