z-index SVG Tidak Bekerja? Perbaiki Urutan Path

Jika path SVG tetap di belakang bentuk lain setelah Anda menaikkan z-index CSS-nya, periksa urutan elemen dalam SVG. Dalam urutan penggambaran SVG biasa, bentuk lebih awal digambar terlebih dahulu dan bentuk berikutnya menutupinya. Untuk membawa path ke depan, tempatkan setelah bentuk yang harus ditutupinya. Model rendering SVG mendefinisikan urutan tersebut.

Pertama, tentukan di mana tumpang tindih terjadi. Seluruh SVG yang berada di belakang header halaman adalah masalah tata letak HTML; dua bentuk di dalam SVG yang sama adalah masalah urutan karya. Perbaikan di bawah menangani kasus kedua.

Lihat perbedaannya pada satu lambang

Kami menggambar lambang asli tiga bagian: bintang oranye, cakram biru, dan pita hijau. Pada panel kiri, bintang berada paling awal dalam SVG dan memiliki CSS position: relative serta z-index: 999. Browser menghitung nilai z-index itu, tetapi cakram dan pita berikutnya tetap menutupi bintang. Pada panel kanan, hanya urutan elemen yang berubah: bintang yang sama berada terakhir dan muncul di depan.

Pengujian memakai HeadlessChrome 141 dengan tangkapan layar 1200 × 680. Urutan anak yang dilaporkan adalah star, disk, ribbon di kiri dan disk, ribbon, star di kanan. Ini adalah pengujian terbatas untuk anak SVG biasa yang bertumpang tindih, bukan janji tentang setiap renderer, grup bersarang, atau efek.

Perbaiki urutan dalam file SVG

Buka sumber SVG di editor teks atau periksa objeknya di editor vektor. Temukan bentuk yang bertumpang tindih dan baca dari atas ke bawah dalam file. Elemen saudara yang lebih awal digambar terlebih dahulu. Pindahkan objek yang perlu muncul di depan ke setelah objek yang harus ditutupinya, lalu simpan salinan.

Misalnya, gambar sederhana ini menempatkan bintang paling akhir:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 160">
  <circle cx="120" cy="80" r="55" fill="#4f86df"/>
  <path d="M20 90 Q110 60 220 100 L220 125 Q110 85 20 115Z"
        fill="#22a79a"/>
  <path id="star" d="M120 20 L135 60 175 62 145 88 155 130
           120 108 85 130 95 88 65 62 105 60Z"
        fill="#ff8c64"/>
</svg>

Data path dan warna isian tidak perlu berubah untuk koreksi ini. Jika aplikasi desain memiliki perintah Bring to Front, ekspor SVG setelahnya dan periksa markup tersimpan atau buka kembali. Panel lapisan yang terlihat dalam editor membantu, tetapi file yang diserahkan adalah yang dibaca renderer berikutnya.

Untuk SVG interaktif, JavaScript dapat memindahkan anak yang ada ke akhir induknya saat ini:

const star = document.querySelector("#star");
star.parentNode.appendChild(star);

Referensi appendChild MDN mengonfirmasi bahwa menambahkan node yang sudah ada memindahkannya, bukan membuat salinan kedua. Gunakan ini hanya ketika perubahan DOM merupakan bagian aplikasi. File logo statis biasanya lebih jelas jika urutan yang dimaksud ditetapkan dalam SVG sendiri.

Periksa grup, lubang, dan jenis urutan lain

Jika bintang merupakan bagian grup, memindahkannya ke akhir di dalam grup itu mungkin masih meninggalkan seluruh grup di belakang grup saudara berikutnya. Periksa struktur induk. Pindahkan grup yang relevan ketika seluruh karya dalam grup harus maju; urutkan ulang anak-anaknya ketika hanya bagian di dalam grup tersebut yang bertumpang tindih. Berhati-hatilah saat mengeluarkan anak dari grup: grup dapat membawa transformasi, pemotongan, opacity, atau mask. Bagian grup pada model rendering SVG menjelaskan mengapa konten dalam grup dirender bersama.

Perbaikan urutan objek juga tidak dapat memperbaiki lubang atau celah nyata dalam geometri path. Jika bagian tengah huruf atau lambang terisi setelah ekspor, periksa bentuk dan file tujuan. Objek opak yang muncul belakangan mungkin sekadar menutupi bukaan. Panduan lubang SVG membantu memisahkan kasus itu dari masalah aturan isian atau kontur. Jika yang muncul adalah garis putih tipis di antara bentuk berdekatan, gunakan diagnosis celah sebelum mengubah tumpukan.

Terakhir, paint-order adalah pengaturan berbeda. Pengaturan ini mengubah kapan isian, stroke, dan marker satu elemen digambar; pengaturan ini tidak menempatkan elemen tersebut di atas path tetangga. Referensi paint-order MDN mendefinisikan cakupannya. Gunakan panduan paint-order ketika outline tebal menyembunyikan isiannya sendiri, bukan ketika satu bagian logo berwarna menyembunyikan bagian lain.

z-index CSS tetap penting untuk kotak HTML yang diposisikan dan item flex atau grid, sebagaimana didokumentasikan MDN. Pisahkan kasus tata letak halaman tersebut dari urutan path yang tersimpan di dalam SVG.

Penerapannya dengan PerfectVector

Gunakan master SVG yang ada jika tersedia. Memvektorisasikannya kembali akan menghasilkan kumpulan bentuk baru tanpa menyelesaikan keputusan lapisan. Jika sumber satu-satunya adalah logo PNG atau JPG yang diratakan, PerfectVector dapat membantu lebih awal dalam alur: ubah gambar menjadi kandidat SVG, lalu periksa bagian-bagian terpisah dan tumpang tindihnya dalam editor. Pindahkan path hasil rekonstruksi ke urutan yang dimaksud sebelum diserahkan. Konversi tidak menentukan objek depan desain Anda atau menjamin bukaan kecil bertahan dalam tracing.

Ketika sumber gambar memiliki blur, bayangan, atau tulisan kecil, menggambar ulang detail tersebut secara manual mungkin lebih andal daripada tracing. Panduan penyuntingan SVG yang lebih luas membahas pembersihan path setelah konversi.

Verifikasi file yang akan Anda serahkan

1. Simpan salinan SVG sumber dan urutkan ulang hanya objek atau grup yang dimaksud.
2. Buka file tersimpan di browser pada ukuran ketika tumpang tindih tersebut penting. Bandingkan dengan desain sumber.
3. Buka kembali di editor atau aplikasi penerima. Periksa tumpang tindih yang sama, serta mask, area terpotong, dan lubang.
4. Jika SVG interaktif, uji perilaku pointer dan hover setelah pengurutan ulang. Bentuk yang kini paling atas mungkin menerima interaksi yang sebelumnya diterima bentuk lain.
5. Jika hasil hanya terlihat salah pada satu tingkat zoom atau ukuran ekspor, periksa sambungan akibat sampling atau celah nyata sebelum memindahkan lebih banyak objek.

Untuk sumber yang hanya berupa raster, buat kandidat SVG dengan PerfectVector, lalu periksa urutan path, bukaan, dan render tersimpannya pada ukuran yang dimaksud. Jika file sudah berisi bentuk vektor yang benar, mulai dengan pengurutan ulang.

FAQ

Bisakah saya memakai z-index CSS untuk membawa satu path SVG ke depan? Untuk bentuk saudara biasa dalam satu SVG, pindahkan path lebih akhir dalam urutan dokumen SVG. z-index CSS yang memengaruhi kotak halaman sekitarnya tidak mengurutkan ulang bentuk anak tersebut secara andal.

Apakah paint-order mengubah objek SVG mana yang berada paling atas? Tidak. Paint-order mengubah urutan isian, stroke, dan marker dalam satu bentuk atau elemen teks. Urutkan ulang objek terpisah untuk mengubah mana yang menutupi yang lain.

Mengapa path masih tersembunyi setelah dipindahkan terakhir dalam grupnya? Seluruh grupnya mungkin berada di belakang grup lain. Periksa grup induk dan transformasi, pemotongan, mask, atau opacity sebelum mengeluarkan anak dari grupnya.

Sources

1. W3C — Model Rendering SVG 1.1 — Mendefinisikan urutan penggambaran elemen dalam dokumen SVG.
2. MDN — Node.appendChild() — Mendokumentasikan perpindahan anak DOM yang sudah ada saat ditambahkan.
3. MDN — Atribut paint-order SVG — Membatasi paint-order pada isian, stroke, dan marker bentuk.
4. MDN — Properti z-index CSS — Menjelaskan z-index untuk item yang diposisikan dan item tata letak dalam tumpukan halaman.
5. W3C — Model Rendering SVG 2 — Menjelaskan stacking context SVG, pengelompokan, dan penentuan target pointer.