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

Question

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

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

Answer 1

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

Например:

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

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

• stroke-opacity атрибут для инсульта
• opacity для всего объекта

Answer 2

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

Вот пример.

Answer 3

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

Answer 4

fill="#044B9466"

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

Вы можете найти поддержку браузера для этого синтаксиса здесь: https://caniuse.com/

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

Answer 5

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

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

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

Ссылки.

Answer 6

Чтобы изменить прозрачность svg-кода, проще всего открыть его в любом текстовом редакторе и найти атрибуты стиля. Способ отображения стилей зависит от создателя svg. Поскольку я являюсь пользователем Inkscape, обычно он устанавливает значения стиля с помощью тега стиля, как если бы это был html, но с использованием собственных атрибутов svg, таких как, stroke, stroke-width, и так далее. opacity влияет на весь объект svg, путь или группу, в которых он указан и, stroke-opacityповлияет только на заливку и прозрачность обводки. Тем не менее, я также использовал и пробовал просто использовать fill и вместо использования #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 охватывает как цветовой, так и альфа-канал.

Answer 7

Если вы хотите просто использовать цвет шрифта или какой-либо другой текущий вычисленный передний цвет, используйте fill='currentColor' Вот как SVG, созданный с помощью значков font awesome, может принимать любой передний цвет, применяемый к шрифтам!