Saya menggunakan lingkaran svg di proyek saya seperti ini,
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 120">
<g>
<g id="one">
<circle fill="green" cx="100" cy="105" r="20" />
</g>
<g id="two">
<circle fill="orange" cx="100" cy="95" r="20" />
</g>
</g>
</svg>
Dan saya menggunakan indeks-z dalam g
tag untuk menunjukkan elemen pertama. Dalam proyek saya, saya hanya perlu menggunakan nilai indeks-z, tetapi saya tidak dapat menggunakan indeks-z untuk elemen svg saya. Saya sudah banyak mencari di Google tetapi saya tidak menemukan apa pun yang relatif. Jadi tolong bantu saya untuk menggunakan z-index di svg saya.
Ini DEMO.
javascript
jquery
svg
z-index
Karthi Keyan
sumber
sumber
Jawaban:
Spesifikasi
Dalam spesifikasi SVG versi 1.1, urutan render didasarkan pada urutan dokumen:
Referensi ke SVG 1.1. Spesifikasi
Solusi (lebih cepat bersih)
Anda harus meletakkan lingkaran hijau sebagai objek terbaru yang akan digambar. Jadi, tukar dua elemen.
Di sini garpu jsFiddle Anda .
Solusi (alternatif)
Tag
use
dengan atributxlink:href
dan sebagai nilai id elemen. Ingatlah bahwa itu mungkin bukan solusi terbaik meskipun hasilnya tampak baik-baik saja. Memiliki sedikit waktu, di sini tautan dari spesifikasi SVG 1.1 "menggunakan" Elemen .Catatan tentang SVG 2
Spesifikasi SVG 2 adalah rilis utama berikutnya dan masih mendukung fitur-fitur di atas.
sumber
Seperti yang orang lain katakan di sini, z-index ditentukan oleh urutan elemen yang muncul di DOM. Jika menata ulang html Anda secara manual bukanlah suatu pilihan atau akan sulit, Anda dapat menggunakan D3 untuk menyusun ulang kelompok / objek SVG.
Gunakan D3 untuk Memperbarui Pesanan DOM dan Fungsi Indeks-Z Mimik
Memperbarui SVG Elemen Z-Indeks Dengan D3
Pada level paling dasar (dan jika Anda tidak menggunakan ID untuk hal lain), Anda dapat menggunakan ID elemen sebagai stand-in untuk z-index dan menyusun ulang dengan itu. Di luar itu, Anda bisa membiarkan imajinasi Anda menjadi liar.
Contoh dalam cuplikan kode
Ide dasarnya adalah:
Gunakan D3 untuk memilih elemen DOM SVG.
Buat beberapa larik indeks-z dengan hubungan 1: 1 dengan elemen SVG Anda (yang ingin Anda pesan ulang). Array indeks-Z yang digunakan dalam contoh di bawah ini adalah ID, posisi x & y, jari-jari, dll ....
Kemudian, gunakan D3 untuk mengikat indeks-z Anda ke pilihan itu.
Terakhir, panggil D3.sort untuk menyusun ulang elemen dalam DOM berdasarkan data.
Contohnya
[3,4,1,2,5]
bergerak / mengatur ulang lingkaran ke-3 (dalam urutan HTML asli) menjadi 1 di DOM, 4 menjadi 2, 1 menjadi 3, , dan seterusnya...sumber
Coba balikkan
#one
dan#two
. Lihatlah biola ini: http://jsfiddle.net/hu2pk/3/Update
Dalam SVG, indeks-z ditentukan oleh urutan elemen yang muncul dalam dokumen . Anda dapat melihat halaman ini juga jika Anda ingin: https://stackoverflow.com/a/482147/1932751
sumber
d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); };
Dan kemudian Anda dapat mengatakanselection.moveToFront()
melalui stackoverflow.com/questions/14167863/...Anda bisa menggunakan gunakan .
Lingkaran hijau muncul di atas.
jsFiddle
sumber
#one
ditarik dua kali. Tetapi jika Anda mau, Anda bisa menyembunyikan instance pertama melalui CSS.use
memiliki efek yang sama dengan mengkloning elemen DOM yang dimaksud<g>
sendiri saat mengubah DOM sebelum memuat.Seperti yang telah dibahas, svgs membuat urutan dan tidak memperhitungkan z-index (untuk saat ini). Mungkin hanya mengirim elemen tertentu ke bagian bawah induknya sehingga akan membuat yang terakhir.
Bekerja untukku.
Memperbarui
Jika Anda memiliki SVG bersarang, yang berisi grup, Anda harus mengeluarkan item dari parentNode-nya.
Fitur SVG yang bagus adalah bahwa setiap elemen berisi lokasi itu terlepas dari grup apa yang bersarang di dalamnya: +1:
sumber
Menggunakan D3:
Jika Anda ingin memasukkan kembali setiap elemen yang dipilih, secara berurutan, sebagai anak terakhir dari induknya.
sumber
selection.raise()
baru dalam D3 pada v4.Tidak ada indeks-z untuk svgs. Tapi svg menentukan elemen mana yang paling atas dengan posisinya di DOM. Dengan demikian, Anda dapat menghapus Obyek dan menempatkannya di akhir svg menjadikannya elemen "yang diberikan terakhir". Yang itu kemudian diberikan "paling atas" secara visual.
Menggunakan jQuery:
pemakaian:
Menggunakan D3.js:
pemakaian:
sumber
Menggunakan D3:
Jika Anda ingin menambahkan elemen dalam urutan terbalik ke penggunaan data:
Alih-alih. Tambahkan
Menambahkan elemen ke atas elemen grup
sumber
Solusi lain adalah menggunakan divs, yang menggunakan zIndex untuk memuat elemen SVG. Seperti di sini: https://stackoverflow.com/a/28904640/4552494
sumber
Solusi bersih, cepat, dan mudah diposting pada tanggal jawaban ini tidak memuaskan. Mereka dikonstruksi atas pernyataan yang salah bahwa dokumen SVG tidak memiliki urutan. Perpustakaan juga tidak perlu. Satu baris kode dapat melakukan sebagian besar operasi untuk memanipulasi urutan objek atau kelompok objek yang mungkin diperlukan dalam pengembangan aplikasi yang memindahkan objek 2D di sekitar dalam ruang xyz.
Z Memesan Pasti Ada dalam Fragmen Dokumen SVG
Apa yang disebut fragmen dokumen SVG adalah pohon elemen yang diturunkan dari SVGElement tipe simpul dasar. Node akar fragmen dokumen SVG adalah SVGSVGElement, yang terkait dengan tag <svg> HTML5 . SVGGElement terkait dengan tag <g> dan mengizinkan anak-anak yang bergabung.
Memiliki atribut z-index pada SVGElement seperti pada CSS akan mengalahkan model rendering SVG. Bagian 3.3 dan 3.4 dari Rekomendasi W3C SVG v1.1 Edisi ke-2 menyatakan bahwa SVG mendokumentasikan fragmen (pohon keturunan dari SVGSVGElement) dibuat dengan menggunakan apa yang disebut pencarian pertama kedalaman pohon . Skema itu adalah urutan az dalam setiap pengertian istilah.
Z order sebenarnya adalah jalan pintas visi komputer untuk menghindari kebutuhan rendering 3D sejati dengan kerumitan dan tuntutan komputasi penelusuran sinar. Persamaan linear untuk indeks-z elemen secara implisit dalam fragmen dokumen SVG.
Ini penting karena jika Anda ingin memindahkan lingkaran yang berada di bawah kotak ke atasnya, Anda cukup memasukkan kotak sebelum lingkaran. Ini dapat dilakukan dengan mudah dalam JavaScript.
Metode Pendukung
Mesin virtual SVGElement memiliki dua metode yang mendukung manipulasi urutan z yang sederhana dan mudah.
Jawaban yang Benar yang Tidak Membuat Pesan
Karena tag SVGGElement ( <g> ) dapat dihapus dan dimasukkan semudah SVGCircleElement atau bentuk lainnya, lapisan gambar yang khas dari produk Adobe dan alat grafis lainnya dapat diimplementasikan dengan mudah menggunakan SVGGElement. JavaScript ini pada dasarnya adalah perintah Move Below .
Jika lapisan robot digambar sebagai anak-anak dari SVGGElement gRobot sebelum pintu digambar sebagai anak-anak dari SVGGElement gDoorway, robot sekarang berada di belakang pintu karena z urutan pintu sekarang adalah satu ditambah z urutan robot.
Perintah Move Above hampir semudah ini.
Pikirkan a = a dan b = b untuk mengingat ini.
Meninggalkan DOM dalam Status yang Konsisten Dengan Tampilan
Alasan jawaban ini benar adalah karena itu minimal dan lengkap dan, seperti internal produk Adobe atau editor grafis yang dirancang dengan baik, meninggalkan representasi internal dalam keadaan yang konsisten dengan tampilan yang dibuat oleh rendering.
Pendekatan Alternatif Tapi Terbatas
Pendekatan lain yang biasa digunakan adalah menggunakan CSS z-index dalam hubungannya dengan beberapa fragmen dokumen SVG (tag SVG) dengan latar belakang sebagian besar transparan di semua kecuali yang bawah. Sekali lagi, ini mengalahkan keanggunan model rendering SVG, membuatnya sulit untuk memindahkan objek ke atas atau ke bawah dalam urutan z.
CATATAN:
sumber
Kami sudah 2019 dan
z-index
masih belum didukung di SVG.Anda dapat melihat dukungan situs SVG2 di Mozilla bahwa negara untuk
z-index
- Tidak dilaksanakan .Anda juga dapat melihat di situs Bug 360148 "Mendukung properti 'z-index' pada elemen SVG" (Dilaporkan: 12 tahun yang lalu).
Tetapi Anda memiliki 3 kemungkinan dalam SVG untuk mengaturnya:
element.appendChild(aChild);
parentNode.insertBefore(newNode, referenceNode);
targetElement.insertAdjacentElement(positionStr, newElement);
(Tidak ada dukungan di IE untuk SVG)Contoh demo interaktif
Dengan semua 3 fungsi ini.
sumber
Dorong elemen SVG untuk bertahan, sehingga z-index-nya akan berada di atas. Di SVG, tidak ada properti yang disebut z-index. coba di bawah javascript untuk membawa elemen ke atas.
Target: Adalah elemen yang harus kita bawa ke atas svg: Adalah wadah elemen
sumber
mudah untuk melakukannya:
sumber