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

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

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

Ответ 1

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

Например:

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

Кроме того, у вас есть следующее:

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

Ответ 2

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

Вот пример.

Ответ 3

fill="#044B9466"

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

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