SVG mengisi transparansi warna / alpha?

416

Apakah mungkin untuk mengatur tingkat transparansi atau alfa pada warna pengisian SVG?

Saya sudah mencoba menambahkan dua nilai ke tag isian (mengubahnya dari fill="#044B94"menjadi fill="#044B9466"), tetapi ini tidak berhasil.

colors svg transparency alpha fill Kaca Ollie
sumber
Bagi siapa saja yang tertarik, untuk menerima klik melalui mengisi yang kosong: lihat SVG Mendeteksi Onclick acara di “fill: none” - yaitu kemungkinan untuk digunakan fill="none"dengan pointer-events="visible".
Fabien Snauwaert

Jawaban:

645

Anda menggunakan atribut tambahan; fill-opacity: Atribut ini mengambil angka desimal antara 0,0 dan 1,0, inklusif; di mana 0,0 benar-benar transparan.

Sebagai contoh:

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

Selain itu, Anda memiliki yang berikut:

  • stroke-opacity atribut untuk stroke
  • opacity untuk seluruh objek
Williham Totland
sumber
3
MDN memberikan tinjauan yang baik tentang hal ini dan atribut terkait lainnya dalam Tutorial SVG mereka, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…
t-mart
4
Anda juga dapat meletakkan ini di atribut style: <rect style = "fill: # 044B94; fill-opacity: 0.4;" />
PeterVermont
Di atas, "fill-opacity" dan "stroke-opacity" harus diganti dengan "fill_opacity" dan "stroke_opacity" (yaitu, ganti tanda hubung dengan garis bawah).
mermaldad
1
@mermaldad Itu tidak benar; lihat spesifikasinya . Dalam beberapa bahasa yang tidak mengizinkan nama mengandung tanda hubung, pustaka untuk bekerja dengan SVG menggunakan nama seperti fill_opacity, tetapi dalam SVG dan CSS, itu fill-opacity.
Williham Totland
@ WillihamTotland, terima kasih atas koreksinya. Saya langsung melompat mental ke "bagaimana cara menerapkan ini menggunakan svgwrite di Python". Di sana Anda perlu mengganti tanda hubung dengan garis bawah.
mermaldad
78

Sebagai solusi yang belum sepenuhnya standar (meskipun sejalan dengan sintaks warna dalam CSS3) Anda dapat menggunakan mis fill="rgba(124,240,10,0.5)". Berfungsi dengan baik di Firefox, Opera, Chrome.

Ini sebuah contoh .

Erik Dahlström
sumber
3
Melihat w3.org/TR/SVG/painting.html#FillProperties (gulirkan sedikit ke bawah untuk opacity-isi); yang terlihat cukup standar bagi saya.
Williham Totland
10
@williham: yes fill-opacity ada dalam rekomendasi SVG, dan tidak ada masalah dengan menggunakannya. Sintaks CSS3 adalah dalam Warna CSS3, yang merupakan satu langkah lagi dari menjadi rekomendasi w3c. SVG 1.1 tidak merujuk Warna CSS3 karena itu tidak tersedia pada saat itu, mungkin versi SVG yang akan datang.
Erik Dahlström
7
Hanya ingin menyebutkan, satu tempat di mana ini tampaknya tidak berfungsi adalah di Inkscape
George Mauer
2
Saya menggunakan solusi ini di Highcharts, dan itu berhasil. Itu dikonversi rgbake rgbdan secara otomatis menambahkan fill-opacityatribut ke dalamnya. Saya tidak yakin apakah ini cara kerjanya di SVG biasa juga, tapi begitulah cara kerjanya. Either way, terima kasih.
Hanna
3
Bisakah saya mendapatkan klarifikasi apa browser yang sebenarnya mendukung rgba di inline svgs?
redanimalwar
6 
fill="#044B9466"

Ini adalah warna RGBA dalam notasi hex di dalam SVG, didefinisikan dengan nilai hex. Ini valid, tetapi tidak semua program dapat menampilkannya dengan benar ...

Anda dapat menemukan dukungan browser untuk sintaks ini di sini: https://caniuse.com/#feat=css-rrggbbaa

Per Agustus 2017: Warna pengisian RGBA akan ditampilkan dengan benar di Mozilla Firefox (54), Apple Safari (10.1) dan "Quick View" Mac OS X Finder. Namun Google Chrome tidak mendukung sintaks ini sampai versi 62 (sebelumnya didukung dari versi 54 dengan bendera Fitur Platform Eksperimental diaktifkan).

Tuan-IDE
sumber
Apakah Anda tahu jika mereka mengubah sesuatu baru-baru ini? Saya punya aplikasi chrome yang berfungsi yang menggunakan fill: rgb (...) dan sekarang benar-benar rusak. Saya akan menghargai bantuan Anda!
Mariodiar
Pustaka Qt SVG (Qt 5.9.3) juga tidak dapat menangani warna RGBA sejauh ini baik sebagai "# 00000000" bentuk hex maupun sebagai "rgba".
bkausbk
2

Untuk membuat isi benar-benar transparan, fill="transparent"tampaknya berfungsi di browser modern. Tapi itu tidak berfungsi di Microsoft Word (untuk Mac), saya harus menggunakan fill-opacity="0".

Brett Donald
sumber
Untuk editor grafik vektor Inkscape 0.92.4.0 , fill="none"berfungsi, tetapi fill="transparent"tidak.
samm
1

Gunakan atribut fill-opacitydalam elemen SVG Anda.

Nilai default adalah 1, minimum adalah 0, pada langkah menggunakan nilai desimal EX: 0,5 = 50% dari alpha. Catatan: Perlu untuk menentukan fillwarna untuk diterapkan fill-opacity.

Lihat contoh saya .

Referensi .

Darlan Dieterich
sumber