Bagaimana cara menggunakan z-index dalam elemen svg?

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 gtag 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.

Spesifikasi

Dalam spesifikasi SVG versi 1.1, urutan render didasarkan pada urutan dokumen:

first element -> "painted" first

Referensi ke SVG 1.1. Spesifikasi

3.3 Rendering Order

Elemen dalam fragmen dokumen SVG memiliki urutan gambar tersirat, dengan elemen pertama dalam fragmen dokumen SVG mendapatkan "dicat" terlebih dahulu . Elemen-elemen selanjutnya dilukis di atas elemen-elemen yang sebelumnya dilukis.

Solusi (lebih cepat bersih)

Anda harus meletakkan lingkaran hijau sebagai objek terbaru yang akan digambar. Jadi, tukar dua elemen.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120"> 
   <!-- First draw the orange circle -->
   <circle fill="orange" cx="100" cy="95" r="20"/> 

   <!-- Then draw the green circle over the current canvas -->
   <circle fill="green" cx="100" cy="105" r="20"/> 
</svg>

Di sini garpu jsFiddle Anda .

Solusi (alternatif)

Tag usedengan atribut xlink:hrefdan 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 .

Tujuan:

Untuk menghindari mewajibkan penulis untuk memodifikasi dokumen yang direferensikan untuk menambahkan ID ke elemen root.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="30 70 160 120">
    <!-- First draw the green circle -->
    <circle id="one" fill="green" cx="100" cy="105" r="20" />
    
    <!-- Then draw the orange circle over the current canvas -->
    <circle id="two" fill="orange" cx="100" cy="95" r="20" />
    
    <!-- Finally draw again the green circle over the current canvas -->
    <use xlink:href="#one"/>
</svg>

Catatan tentang SVG 2

Spesifikasi SVG 2 adalah rilis utama berikutnya dan masih mendukung fitur-fitur di atas.

3.4. Perintah rendering

Elemen dalam SVG diposisikan dalam tiga dimensi. Selain posisinya pada sumbu x dan y pada SVG viewport, elemen SVG juga diposisikan pada sumbu z. Posisi pada sumbu z menentukan urutan bahwa mereka dicat .

Sepanjang sumbu z, elemen dikelompokkan ke dalam konteks penumpukan.

3.4.1. Menetapkan konteks penumpukan di SVG

...

Susun konteks adalah alat konseptual yang digunakan untuk menggambarkan urutan elemen harus dicat satu di atas yang lain ketika dokumen diberikan, ...

• SVG 2 Dukungan Mozilla - Lukisan
• Bagaimana saya tahu jika browser saya mendukung svg 2.0
• Bisakah saya menggunakan SVG

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

var circles = d3.selectAll('circle')
var label = d3.select('svg').append('text')
    .attr('transform', 'translate(' + [5,100] + ')')

var zOrders = {
    IDs: circles[0].map(function(cv){ return cv.id; }),
    xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }),
    yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }),
    radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }),
    customOrder: [3, 4, 1, 2, 5]
}

var setOrderBy = 'IDs';
var setOrder = d3.descending;

label.text(setOrderBy);
circles.data(zOrders[setOrderBy])
circles.sort(setOrder);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100"> 
  <circle id="1" fill="green" cx="50" cy="40" r="20"/> 
  <circle id="2" fill="orange" cx="60" cy="50" r="18"/>
  <circle id="3" fill="red" cx="40" cy="55" r="10"/> 
  <circle id="4" fill="blue" cx="70" cy="20" r="30"/> 
  <circle id="5" fill="pink" cx="35" cy="20" r="15"/> 
</svg>

Ide dasarnya adalah:

1. Gunakan D3 untuk memilih elemen DOM SVG.

   var circles = d3.selectAll('circle')

2. 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 ....

   var zOrders = {
       IDs: circles[0].map(function(cv){ return cv.id; }),
       xPos: circles[0].map(function(cv){ return cv.cx.baseVal.value; }),
       yPos: circles[0].map(function(cv){ return cv.cy.baseVal.value; }),
       radii: circles[0].map(function(cv){ return cv.r.baseVal.value; }),
       customOrder: [3, 4, 1, 2, 5]
   }

3. Kemudian, gunakan D3 untuk mengikat indeks-z Anda ke pilihan itu.

   circles.data(zOrders[setOrderBy]);

4. Terakhir, panggil D3.sort untuk menyusun ulang elemen dalam DOM berdasarkan data.

   circles.sort(setOrder);

Contohnya

• Anda dapat menumpuk dengan ID

• Dengan SVG paling kiri di atas

• Jari-jari terkecil di atas

• Atau Tentukan larik untuk menerapkan z-indeks untuk pemesanan tertentu - dalam kode contoh saya larik [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...

Coba balikkan #onedan #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

Anda bisa menggunakan gunakan .

<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>
    <use xlink:href="#one" />
</svg>

Lingkaran hijau muncul di atas.
jsFiddle

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.

function bringToTop(targetElement){
  // put the element at the bottom of its parent
  let parent = targetElement.parentNode;
  parent.appendChild(targetElement);
}

// then just pass through the element you wish to bring to the top
bringToTop(document.getElementById("one"));

Bekerja untukku.

Memperbarui

Jika Anda memiliki SVG bersarang, yang berisi grup, Anda harus mengeluarkan item dari parentNode-nya.

function bringToTopofSVG(targetElement){
  let parent = targetElement.ownerSVGElement;
  parent.appendChild(targetElement);
}

Fitur SVG yang bagus adalah bahwa setiap elemen berisi lokasi itu terlepas dari grup apa yang bersarang di dalamnya: +1:

Menggunakan D3:

Jika Anda ingin memasukkan kembali setiap elemen yang dipilih, secara berurutan, sebagai anak terakhir dari induknya.

selection.raise()

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:

function moveUp(thisObject){
    thisObject.appendTo(thisObject.parents('svg>g'));
}

pemakaian:

moveUp($('#myTopElement'));

Menggunakan D3.js:

d3.selection.prototype.moveUp = function() {
    return this.each(function() {
        this.parentNode.appendChild(this);
    });
};

pemakaian:

myTopElement.moveUp();

Menggunakan D3:

Jika Anda ingin menambahkan elemen dalam urutan terbalik ke penggunaan data:

.insert('g', ":first-child")

Alih-alih. Tambahkan

Menambahkan elemen ke atas elemen grup

Solusi lain adalah menggunakan divs, yang menggunakan zIndex untuk memuat elemen SVG. Seperti di sini: https://stackoverflow.com/a/28904640/4552494

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.

z-index = z-index_of_svg_tag + depth_first_tree_index / tree_node_qty

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.

• parent.removeChild (anak)
• parent.insertBefore (child, childRef)

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 .

parent.insertBefore(parent.removeChild(gRobot), gDoorway)

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.

parent.insertBefore(parent.removeChild(gRobot), gDoorway.nextSibling())

Pikirkan a = a dan b = b untuk mengingat ini.

insert after = move above
insert before = move below

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:

1. ( https://www.w3.org/TR/SVG/render.html v 1.1, Edisi 2, 16 Agustus 2011)

   3.3 Elemen Urutan Rendering dalam fragmen dokumen SVG memiliki urutan gambar implisit, dengan elemen pertama dalam fragmen dokumen SVG mendapatkan "dicat" terlebih dahulu. Elemen-elemen selanjutnya dilukis di atas elemen-elemen yang sebelumnya dilukis.

   3.4 Bagaimana kelompok diberikan Elemen pengelompokan seperti elemen 'g' (lihat elemen wadah) memiliki efek menghasilkan kanvas terpisah sementara diinisialisasi ke hitam transparan ke mana elemen anak-anak dicat. Setelah menyelesaikan grup, setiap efek filter yang ditentukan untuk grup diterapkan untuk membuat kanvas sementara yang dimodifikasi. Kanvas sementara yang dimodifikasi dikomposisikan ke dalam latar belakang, dengan mempertimbangkan setiap pengaturan level-masking dan opacity pada grup.

Kami sudah 2019 dan z-indexmasih 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:

1. Dengan element.appendChild(aChild);
2. Dengan parentNode.insertBefore(newNode, referenceNode);
3. Dengan targetElement.insertAdjacentElement(positionStr, newElement);(Tidak ada dukungan di IE untuk SVG)

Contoh demo interaktif

Dengan semua 3 fungsi ini.

var state = 0,
    index = 100;

document.onclick = function(e)
{
    if(e.target.getAttribute('class') == 'clickable')
    {
        var parent = e.target.parentNode;

        if(state == 0)
            parent.appendChild(e.target);
        else if(state == 1)
            parent.insertBefore(e.target, null); //null - adds it on the end
        else if(state == 2)
            parent.insertAdjacentElement('beforeend', e.target);
        else
            e.target.style.zIndex = index++;
    }
};

if(!document.querySelector('svg').insertAdjacentElement)
{
    var label = document.querySelectorAll('label')[2];
    label.setAttribute('disabled','disabled');
    label.style.color = '#aaa';
    label.style.background = '#eee';
    label.style.cursor = 'not-allowed';
    label.title = 'This function is not supported in SVG for your browser.';
}

label{background:#cef;padding:5px;cursor:pointer}
.clickable{cursor:pointer}

With: 
<label><input type="radio" name="check" onclick="state=0" checked/>appendChild()</label>
<label><input type="radio" name="check" onclick="state=1"/>insertBefore()</label><br><br>
<label><input type="radio" name="check" onclick="state=2"/>insertAdjacentElement()</label>
<label><input type="radio" name="check" onclick="state=3"/>Try it with z-index</label>
<br>
<svg width="150" height="150" viewBox="0 0 150 150">
    <g stroke="none">
        <rect id="i1" class="clickable" x="10" y="10" width="50" height="50" fill="#80f"/>
        <rect id="i2" class="clickable" x="40" y="40" width="50" height="50" fill="#8f0"/>
        <rect id="i3" class="clickable" x="70" y="70" width="50" height="50" fill="#08f"/>
    </g>
</svg>

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.

var Target = document.getElementById(event.currentTarget.id);
var svg = document.getElementById("SVGEditor");
svg.insertBefore(Target, svg.lastChild.nextSibling);

Target: Adalah elemen yang harus kita bawa ke atas svg: Adalah wadah elemen

mudah untuk melakukannya:

1. mengkloning barang-barang Anda
2. mengurutkan item yang dikloning
3. ganti item dengan dikloning

function rebuildElementsOrder( selector, orderAttr, sortFnCallback ) {
	let $items = $(selector);
	let $cloned = $items.clone();
	
	$cloned.sort(sortFnCallback != null ? sortFnCallback : function(a,b) {
  		let i0 = a.getAttribute(orderAttr)?parseInt(a.getAttribute(orderAttr)):0,
  		    i1 = b.getAttribute(orderAttr)?parseInt(b.getAttribute(orderAttr)):0;
  		return i0 > i1?1:-1;
	});

        $items.each(function(i, e){
            e.replaceWith($cloned[i]);
	})
}

$('use[order]').click(function() {
    rebuildElementsOrder('use[order]', 'order');

    /* you can use z-index property for inline css declaration
    ** getComputedStyle always return "auto" in both Internal and External CSS decl [tested in chrome]
    
    rebuildElementsOrder( 'use[order]', null, function(a, b) {
        let i0 = a.style.zIndex?parseInt(a.style.zIndex):0,
  		    i1 = b.style.zIndex?parseInt(b.style.zIndex):0;
  		return i0 > i1?1:-1;
    });
    */
});

use[order] {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="keybContainer" viewBox="0 0 150 150" xml:space="preserve">
<defs>
    <symbol id="sym-cr" preserveAspectRatio="xMidYMid meet" viewBox="0 0 60 60">
        <circle cx="30" cy="30" r="30" />
        <text x="30" y="30" text-anchor="middle" font-size="0.45em" fill="white">
            <tspan dy="0.2em">Click to reorder</tspan>
        </text>
    </symbol>
</defs>
    <use order="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="0" y="0" width="60" height="60" style="fill: #ff9700; z-index: 1;"></use>
    <use order="4" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="50" y="20" width="50" height="50" style="fill: #0D47A1; z-index: 4;"></use>
    <use order="5" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="15" y="30" width="50" height="40" style="fill: #9E9E9E; z-index: 5;"></use>
    <use order="3" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="25" y="30" width="80" height="80" style="fill: #D1E163; z-index: 3;"></use>
    <use order="2" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="30" y="0" width="50" height="70" style="fill: #00BCD4; z-index: 2;"></use>
    <use order="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sym-cr" x="5" y="5" width="100" height="100" style="fill: #E91E63; z-index: 0;"></use>
</svg>