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.

— 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

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