it-swarm.com.ru

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

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

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

355
Ollie Glass

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

Например:

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

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

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

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

Вот пример .

71
Erik Dahlström
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 с включенным флагом «Функции экспериментальной платформы»).

4
Mr-IDE

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

0
Brett Donald

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

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

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

Рекомендации .

0
Darlan Dieterich