Прозорість кольору заповнення SVG / альфа?

416

Чи можна встановити прозорість або альфа-рівень для кольорів заповнення SVG?

Я спробував додати два значення до тегу заливки (змінивши його fill="#044B94"на fill="#044B9466"), але це не працює.

— Оллі Гласс
джерело

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

— Фабієн Сноуерт

645

Ви використовуєте додатковий атрибут; fill-opacity: Цей атрибут приймає десяткове число від 0,0 до 1,0 включно; де 0,0 повністю прозорий.

Наприклад:

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

Додатково у вас є:

stroke-opacity атрибут для інсульту
opacity для всього об’єкта

— Вілліхам Тотланд
джерело

3

MDN надає хороший огляд цього та інших пов’язаних атрибутів у своєму навчальному посібнику SVG, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…

— t-март

4

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

— PeterVermont

У вищесказаному "fill-opacity" та "stroke-nepacity" слід замінити на "fill_opacity" та "stroke_opacity" (тобто замінити дефіси на підкреслення).

— mermaldad

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 в inline 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 із увімкненим прапором "Особливості експериментальної платформи").

— Містер-ІДЕ
джерело

Чи знаєте ви, чи нещодавно вони щось змінили? У мене був робочий хром-додаток, який використовував fill: rgb (...), і тепер він повністю порушений. Я б вдячний за вашу допомогу!

— Маріодіар

Qt SVG-бібліотека (Qt 5.9.3) також не може обробляти кольори RGBA поки що ні шістнадцятковою формою "# 00000000", ні як "rgba".

— bkausbk

2

Зробити заливку повністю прозорою, fill="transparent"здається, працює в сучасних браузерах. Але це не працювало в Microsoft Word (для Mac), мені довелося використовувати fill-opacity="0".

— Бретт Дональд
джерело

Для Inkscape редактора векторної графіки 0.92.4.0 , fill="none"працює, але fill="transparent"не робить.

— самм

1

Використовуйте атрибут fill-opacityу своєму елементі SVG.

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

Дивіться мій приклад .

Список літератури .

— Дарлан Дітерих
джерело