Kolor wypełnienia SVG przezroczystość / alfa?

416

Czy można ustawić poziom przezroczystości lub alfa dla kolorów wypełnienia SVG?

Próbowałem dodać dwie wartości do tagu fill (zmieniając go z fill="#044B94"na fill="#044B9466"), ale to nie działa.

colors svg transparency alpha fill Szkło Ollie
źródło
Dla wszystkich zainteresowanych, aby otrzymywać kliknięcia w puste wypełnienie: patrz SVG Wykryj zdarzenia Onclick na „fill: none” - tj. Możliwość korzystania fill="none"z pointer-events="visible".
Fabien Snauwaert

Odpowiedzi:

645

Używasz dodatkowego atrybutu; fill-opacity: Ten atrybut przyjmuje liczbę dziesiętną od 0,0 do 1,0 włącznie; gdzie 0.0 jest całkowicie przezroczysty.

Na przykład:

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

Dodatkowo masz następujące elementy:

  • stroke-opacity atrybut obrysu
  • opacity dla całego obiektu
Williham Totland
źródło
3
MDN zapewnia dobry przegląd tego i innych powiązanych atrybutów w samouczku SVG, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/...
t-mart
4
możesz również umieścić je w atrybucie stylu: <rect style = "fill: # 044B94; fill-opacity: 0.4;" />
PeterVermont
W powyższym wyrażeniu „krycie wypełnienia” i „krycie obrysu” należy zastąpić wyrazami „fill_opacity” i „stroke_opacity” (tzn. Zastąpić myślniki znakiem podkreślenia).
mermaldad
1
@ermermadad To jest niepoprawne; patrz specyfikacja . W niektórych językach, w których nazwy nie mogą zawierać łączników, biblioteki do pracy z SVG używają takich nazw fill_opacity, ale w SVG i CSS tak jest fill-opacity.
Williham Totland
@WillihamTotland, dzięki za korektę. Przeskoczyłem mentalnie prosto do „jak to zaimplementować za pomocą svgwrite w Pythonie”. Tam musisz zastąpić łączniki myślnikami.
mermaldad
78

Jako jeszcze nie w pełni ustandaryzowane rozwiązanie (choć w zgodzie ze składnią kolorów w CSS3) możesz użyć np fill="rgba(124,240,10,0.5)". Działa dobrze w Firefox, Opera, Chrome.

Oto przykład .

Erik Dahlström
źródło
3
Patrząc na w3.org/TR/SVG/painting.html#FillProperties (przewiń nieco w dół, aby uzyskać krycie wypełnienia); wygląda mi to na w pełni znormalizowaną.
Williham Totland
10
@williham: tak, krycie wypełnienia jest zaleceniem SVG i nie ma problemu z jego użyciem. Składnia CSS3 jest w kolorze CSS3, co stanowi krok od uzyskania rekomendacji w3c. SVG 1.1 nie odwołuje się do CSS3 Color, ponieważ nie był wtedy dostępny, prawdopodobnie będzie to w przyszłej wersji SVG.
Erik Dahlström
7
Chciałbym tylko wspomnieć, że jedno miejsce, w którym wydaje się, że to nie działa, znajduje się w Inkscape
George Mauer
2
Użyłem tego rozwiązania na Highcharts i zadziałało. Przekształcany rgbado rgbautomatycznie dodaje fill-opacityatrybut do niego. Nie jestem pewien, czy tak też działa normalne pliki SVG, ale tak to tam działało. Tak czy inaczej, dzięki.
Hanna
3
Czy mogę uzyskać wyjaśnienie, które przeglądarki faktycznie obsługują rgba w plikach SVG?
redanimalwar
6 
fill="#044B9466"

Jest to kolor RGBA w zapisie szesnastkowym wewnątrz SVG, zdefiniowany za pomocą wartości szesnastkowych. Jest to poprawne, ale nie wszystkie programy mogą wyświetlać go poprawnie ...

Wsparcie przeglądarki dla tej składni można znaleźć tutaj: https://caniuse.com/#feat=css-rrggbbaa

Od sierpnia 2017: kolory wypełnienia RGBA będą wyświetlane poprawnie w przeglądarkach Mozilla Firefox (54), Apple Safari (10.1) i Mac OS X Finder „Szybki podgląd”. Jednak Google Chrome nie obsługiwał tej składni aż do wersji 62 (wcześniej był obsługiwany od wersji 54 z włączoną flagą Funkcje platformy eksperymentalnej).

Mr-IDE
źródło
Czy wiesz, czy coś ostatnio zmienili? Miałem działającą aplikację chrome, która używała fill: rgb (...) i teraz jest całkowicie zepsuta. Będę wdzięczny za twoją pomoc!
Mariodiar
Biblioteka Qt SVG (Qt 5.9.3) nie obsługuje do tej pory kolorów RGBA ani w postaci szesnastkowej „# 00000000”, ani jako „rgba”.
bkausbk
2

Aby wypełnienie było całkowicie przezroczyste, fill="transparent"wydaje się działać w nowoczesnych przeglądarkach. Ale to nie działało w Microsoft Word (dla komputerów Mac), musiałem użyć fill-opacity="0".

Brett Donald
źródło
Dla Inkscape edytor grafiki wektorowej 0.92.4.0 , fill="none"działa, ale fill="transparent"nie działa.
samm
1

Użyj atrybutu fill-opacityw swoim elemencie SVG.

Wartość domyślna to 1, minimum to 0, w kroku użyj wartości dziesiętnych EX: 0,5 = 50% alfa. Uwaga: Konieczne jest zdefiniowanie fillkoloru do zastosowania fill-opacity.

Zobacz mój przykład .

Odniesienia .

Darlan Dieterich
źródło