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

417

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

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

— Олли Гласс
источник

Для тех, кто заинтересован, чтобы получать клики через пустую заливку: см. SVG Detect Onclick для событий «fill: none» - то есть возможность использовать fill="none"с pointer-events="visible".

— Фабьен Снауварт

646

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

Например:

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

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

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

— Виллихам Тотланд
источник

3

MDN дает хороший обзор этого и других связанных атрибутов в своем SVG Tutorial, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…

— t-mart

4

Вы также можете поместить их в атрибут style: <rect style = "fill: # 044B94; fill-opacity: 0.4;" />

— PeterVermont

В приведенном выше тексте «fill-opacity» и «stroke-opacity» следует заменить на «fill_opacity» и «stroke_opacity» (то есть заменить дефисы подчеркиванием).

— Мермальдад

1

@mermaldad Это неправильно; см спецификации . В некоторых языках, в которых имена не могут содержать дефисы, библиотеки для работы с SVG используют такие имена, как fill_opacity, но в SVG и CSS это так fill-opacity.

— Виллихам Тотланд

@WillihamTotland, спасибо за исправление. Я мысленно перешел к «как мне реализовать это с помощью svgwrite в Python». Там нужно заменить дефисы подчеркиванием.

— Mermaldad

78

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

Вот пример .

— Эрик Дальстрём
источник

3

Посмотрите на w3.org/TR/SVG/painting.html#FillProperties (прокрутите немного вниз для заполнения непрозрачности); это выглядит довольно стандартизированным для меня.

— Виллихам Тотланд

10

@williham: да, заполняемость непрозрачна в рекомендации SVG, и с этим нет проблем. Синтаксис CSS3 представлен в цвете CSS3, который находится в одном шаге от рекомендации w3c. SVG 1.1 не ссылается на CSS3 Color, потому что он не был доступен в то время, вероятно, будет в будущей версии SVG.

— Эрик Дальстрем

7

Просто хочу отметить, что одно место, где это, похоже, не работает, находится в Inkscape

— Джордж Мауэр

2

Я использовал это решение на Highcharts, и оно сработало. Он преобразован rgbaв rgbи автоматически добавил fill-opacityатрибут к нему. Я не уверен, так ли это работает в обычных SVG, но так оно и было. В любом случае, спасибо.

— Ханна

3

Могу ли я получить некоторые разъяснения о том, какие браузеры действительно поддерживают rgba во встроенных svgs?

— Redanimalwar

6

fill="#044B9466"

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

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

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

— Mr-IDE
источник

Вы знаете, изменили ли они что-то недавно? У меня было рабочее приложение Chrome, которое использовало fill: rgb (...), и теперь оно полностью сломано. Буду признателен за вашу помощь!

— Мариодьяр

Библиотека Qt SVG (Qt 5.9.3) также не может обрабатывать цвета RGBA до тех пор, пока она не является шестнадцатеричной формой "# 00000000" и не является "rgba".

— bkausbk

2

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

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

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

Ссылки .

— Дарлан Дитрих
источник

2

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

— Бретт Дональд
источник

Для Inkscape редактора векторной графики 0.92.4.0 , fill="none"работает, но fill="transparent"не делает.

— Самм