Цвет заливки SVG прозрачность / альфа?

Можно ли установить прозрачность или альфа-уровень для цветов заливки SVG?

Я пробовал добавить два значения к тегу заполнения (изменив его с fill="#044B94" на fill="#044B9466"), но это не сработало.


svg colors alpha transparency fill
person Ollie Glass    schedule 18.05.2011    source источник
comment
Для всех, кому интересно, чтобы получать щелчки по пустому заполнению: см. Обнаружение SVG События Onclick на «fill: none» - то есть возможность использовать fill="none" с pointer-events="visible".   -  person Fabien Snauwaert    schedule 08.02.2020

Ответы (6)


arrow_upward
718
arrow_downward

Вы используете дополнительный атрибут; fill-opacity: этот атрибут принимает десятичное число от 0,0 до 1,0 включительно; где 0.0 полностью прозрачно.

Например:

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

Дополнительно у вас есть следующее:

  • stroke-opacity атрибут штриха
  • opacity для всего объекта
person Williham Totland    schedule 18.05.2011
comment
MDN предоставляет хороший обзор this и других связанных атрибутов в своем руководстве по SVG developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/ - person t-mart; 16.02.2014
comment
вы также можете поместить их в атрибут стиля: ‹rect style = fill: # 044B94; fill-opacity: 0.4; / › - person PeterVermont; 27.07.2016
comment
В приведенном выше примере fill-opacity и stroke-opacity следует заменить на fill_opacity и stroke_opacity (то есть заменить дефис на подчеркивание). - person mermaldad; 06.06.2020
comment
@mermaldad Это неверно; см. спецификацию. В некоторых языках, которые не позволяют использовать дефис в именах, библиотеки для работы с SVG используют имена типа fill_opacity, но в SVG и CSS это fill-opacity. - person Williham Totland; 08.06.2020
comment
@WillihamTotland, спасибо за исправление. Я мысленно сразу перешел к тому, как реализовать это с помощью svgwrite в Python. Там вам нужно заменить дефис на подчеркивание. - person mermaldad; 11.06.2020

arrow_upward
81
arrow_downward

В качестве еще не полностью стандартизированного решения (хотя и в соответствии с синтаксисом цвета в CSS3) вы можете использовать, например, fill="rgba(124,240,10,0.5)". Прекрасно работает в Firefox, Opera, Chrome.

Вот пример.

person Erik Dahlström    schedule 18.05.2011
comment
Глядя на w3.org/TR/SVG/painting.html#FillProperties (прокрутите немного вниз, чтобы увидеть непрозрачность заливки); мне это кажется полностью стандартизированным. - person Williham Totland; 19.05.2011
comment
@williham: да, непрозрачность заливки входит в рекомендацию SVG, и нет никаких проблем с ее использованием. Синтаксис CSS3 - это CSS3 Color, что в одном шаге от того, чтобы стать рекомендацией w3c. SVG 1.1 не ссылается на CSS3 Color, потому что в то время он не был доступен, скорее всего, в будущей версии SVG. - person Erik Dahlström; 19.05.2011
comment
Ах. Кажется, я неправильно прочитал ваш ответ, поскольку полностью стандартизированного решения не существует, но:…; что было бы неправильно. Еще; использование rgba () кажется бессмысленным, когда у вас есть отдельное значение непрозрачности, которое нужно настроить. - person Williham Totland; 19.05.2011
comment
Если вы делаете в основном CSS, вы, вероятно, ожидаете, что одни и те же цвета будут работать и в SVG, верно? Выравнивание - это хорошо, плюс оно дает немного больше функциональности с синтаксисом hsla () (который также должен работать в браузерах, поддерживающих rgba () в svg). - person Erik Dahlström; 19.05.2011
comment
Просто хочу упомянуть, что одно место, где это не работает, - это Inkscape. - person George Mauer; 16.07.2012
comment
Я использовал это решение на Highcharts, и оно сработало. Он преобразовал rgba в rgb и автоматически добавил к нему атрибут fill-opacity. Я не уверен, что это работает и в обычных SVG-файлах, но именно так это работало там. В любом случае спасибо. - person Hanna; 21.04.2014
comment
Могу я прояснить, какие браузеры на самом деле поддерживают rgba во встроенных SVG? - person redanimalwar; 09.12.2016
comment
@redanimalwar Chrome 66 в настоящее время этого не делает. - person brandito; 16.05.2018
comment
@Brandito, пример отлично работает в Chrome 66, не уверен, что вы имеете в виду. - person Erik Dahlström; 21.05.2018
comment
Похоже, у меня это не работает. (Version 74.0.3729.131 (Official Build) (64-bit) (cohort: 74_131_Win) работает на Windows 7 Service Pack 1 Build 7601.24411) - person Solomon Ucko; 05.05.2019

arrow_upward
9
arrow_downward 

fill="#044B9466"

Это цвет RGBA в шестнадцатеричной нотации внутри SVG, определенный шестнадцатеричными значениями. Это действительно так, но не все программы могут это правильно отображать ...

Поддержку этого синтаксиса в браузере можно найти здесь: https://caniuse.com/#feat=css-rrggbbaa

По состоянию на август 2017 года: цвета заливки RGBA будут правильно отображаться в Mozilla Firefox (54), Apple Safari (10.1) и в Quick View Mac OS X Finder. Однако Google Chrome не поддерживал этот синтаксис до версии 62 (ранее поддерживался с версии 54 с включенным флагом Experimental Platform Features).

По состоянию на апрель 2021 года Inkscape версии 1.0.2 не может читать этот формат в файлах SVG и вместо этого преобразует любой цвет RGBA в непрозрачный черный. Отчет об ошибке находится здесь: https://gitlab.com/inkscape/inbox/-/issues/1195

person Mr-IDE    schedule 07.08.2017
comment
Вы знаете, меняли ли они что-то в последнее время? У меня было рабочее приложение для Chrome, которое использовало fill: rgb (...), и теперь оно полностью сломано. Буду признателен за вашу помощь! - person Mariodiar; 16.08.2017
comment
Библиотека Qt SVG (Qt 5.9.3) также не может обрабатывать цвета RGBA до сих пор ни в шестнадцатеричной форме # 00000000, ни в виде rgba. - person bkausbk; 24.01.2018

arrow_upward
2
arrow_downward

Используйте атрибут fill-opacity в вашем элементе SVG.

Значение по умолчанию - 1, минимум - 0, при пошаговом использовании десятичные значения EX: 0,5 = 50% альфа. Примечание: необходимо определить fill цвет, чтобы применить fill-opacity.

См. мой пример.

Ссылки.

person Darlan D.    schedule 14.05.2018

arrow_upward
2
arrow_downward

Чтобы сделать заливку полностью прозрачной, fill="transparent", похоже, работает в современных браузерах. Но в Microsoft Word (для Mac) не работало, пришлось использовать fill-opacity="0".

person Brett Donald    schedule 14.05.2019
comment
Для редактора векторной графики Inkscape 0.92.4.0 fill="none" работает, а fill="transparent" - нет . - person samm; 27.05.2020
comment
fill="none" - это стандартный способ сделать это, и он работает в Inkscape, Firefox, Chrome или любом другом приложении SVG. См. w3.org/TR/SVG2/painting.html#SpecifyingPaint. - person Alex Henrie; 17.10.2020

arrow_upward
1
arrow_downward

Чтобы изменить прозрачность кода svg, самый простой способ - открыть его в любом текстовом редакторе и найти атрибуты стиля. От создателя svg зависит способ отображения стилей. Поскольку я являюсь пользователем Inkscape, обычно значения стиля устанавливаются с помощью тега стиля, как если бы это был HTML, но с использованием собственных атрибутов svg, таких как fill, stroke, stroke-width, opacity и так далее. opacity влияет на весь объект svg, или путь, или группу, в которой это указано, и fill-opacity, stroke-opacity будут влиять только на заливку и прозрачность обводки. Тем не менее, я также использовал и пробовал просто использовать fill и вместо using#fff использовать вместо него стандарт rgba, подобный этому rgba(255, 255, 255, 1), как и в css. Это отлично работает для современных браузеров.

Имейте в виду, что если вы намереваетесь повторно редактировать свой SVG, по моему опыту, лучше всего всегда держать под рукой нетронутую версию. Inkscape более гибок с ручным изменением svg, но Illustrator и CorelDraw могут иметь проблемы с импортом и редактированием svg.

Пример

<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"/>

Пример 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"/>

Пример 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"/>

Обратите внимание, что в последнем примере fill-opacity был удален, поскольку стандарт rgba охватывает как цветовой, так и альфа-канал.

person SIMBIOSIS    schedule 08.02.2021