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="#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 с включенным флагом «Экспериментальные возможности платформы»).

Answer 4

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

Answer 5

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

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

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

Ссылки .