Przeźroczystość kolorów SVG / alpha?

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

Oto przykład .

fill="#044B9466"

Jest to kolor RGBA w notacji szesnastkowej wewnątrz SVG, zdefiniowany wartościami szesnastkowymi. Jest to poprawne, ale nie wszystkie programy mogą je poprawnie wyświetlić...

Możesz znaleźć obsługę przeglądarki dla tej składni tutaj: https://caniuse.com/#feat=css-rrggbbaa

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

Użyj atrybutu fill-opacity w elemencie SVG.

Wartość domyślna to 1, minimalna to 0, w kroku użyj wartości dziesiętnych EX: 0.5 = 50% Alfa. Uwaga: konieczne jest zdefiniowanie koloru fill do zastosowania fill-opacity.

Zobacz mój przykład .

Bibliografia .

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

Aby zmienić przezroczystość w kodzie svg, najprostszym sposobem jest otwarcie go w dowolnym edytorze tekstu i wyszukanie atrybutów stylu. Sposób wyświetlania stylów zależy od twórcy svg. Ponieważ jestem użytkownikiem Inkscape, Zwykle ustawia wartości stylu za pomocą znacznika stylu, tak jak gdyby był to html, ale używając natywnych atrybutów svg, takich jak fill, stroke, stroke-width, opacity i tak dalej. opacity wpływa na cały obiekt svg, ścieżkę lub grupę, w której jego fill-opacity, stroke-opacity wpłynie tylko na wypełnienie i przezroczystość obrysu. To powiedziawszy, użyłem i spróbowałem po prostu użyć fill i zamiast używać#fff użyj zamiast tego standardu rgba, takiego jak ten rgba(255, 255, 255, 1), tak jak w css. To działa dobrze dla musi nowoczesnych przeglądarek.

Pamiętaj, że jeśli zamierzasz dalej edytować swój svg, najlepszą praktyką, z mojego doświadczenia, jest zawsze trzymanie nietkniętej wersji pod ręką. Program Inkscape jest bardziej elastyczny z ręcznie zmienianymi plikami SVG, ale programy Illustrator i CorelDraw mogą mieć problemy z importowaniem i edytowaniem svg.

Przykład

<path style="fill:#ff0000;fill-opacity:1;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

Przykład 2

<path style="fill:#ff0000;fill-opacity:.5;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

Przykład 3

<path style="fill:rgba(255, 0, 0, .5;stroke:#1a1a1a;stroke-width:2px;stroke-opacity:1" d="m 144.44226,461.14425 q 16.3125,-15.05769 37.64423,-15.05769 21.33173,0 36.38942,15.05769 15.0577,15.05769 15.0577,36.38942 0,21.33173 -15.0577,36.38943 -15.05769,16.3125 -36.38942,16.3125 -21.33173,0 -37.64423,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z M 28.99995,35.764435 l 85.32692,0 23.84135,52.701923 386.48078,0 q 10.03846,0 17.5673,7.528847 8.78366,7.528845 8.78366,17.567305 0,7.52885 -2.50962,12.54808 l -94.11058,161.87019 q -13.80288,27.60577 -45.17307,27.60577 l -194.4952,0 -26.35096,40.15385 q -2.50962,6.27404 -2.50962,7.52885 0,6.27404 6.27404,6.27404 l 298.64424,0 0,50.1923 -304.91828,0 q -25.09615,0 -41.40865,-13.80288 -15.05769,-13.80289 -15.05769,-38.89904 0,-15.05769 6.27404,-25.09615 l 38.89903,-63.9952 -92.855766,-189.475962 -52.701924,0 0,-52.701923 z M 401.67784,461.14425 q 15.05769,-15.05769 36.38942,-15.05769 21.33174,0 36.38943,15.05769 16.3125,15.05769 16.3125,36.38942 0,21.33173 -16.3125,36.38943 -15.05769,16.3125 -36.38943,16.3125 -21.33173,0 -36.38942,-16.3125 -15.05769,-15.0577 -15.05769,-36.38943 0,-21.33173 15.05769,-36.38942 z"/>

Zauważ, że w ostatnim przykładzie fill-opacity został usunięty, ponieważ standard rgba obejmuje zarówno kanał kolorowy, jak i Alfa.