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

417

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

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

colors svg transparency alpha fill Олли Гласс
источник
Для тех, кто заинтересован, чтобы получать клики через пустую заливку: см. 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"не делает.
Самм