Bagaimana cara menggunakan z-index dalam elemen svg?

154

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.

Karthi Keyan
sumber

Jawaban:

163

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

Maicolpt
sumber
Ada juga konsep lama tentang mengesampingkan urutan rendering, tetapi itu adalah fitur yang tidak tersedia. Referensi Draft
Maicolpt
12
Astaga! tidak selalu mudah untuk menggambar elemen dalam urutan yang Anda inginkan, terutama jika objek dihasilkan secara terprogram dan mungkin tampak bersarang (mis. tampaknya g tidak dapat berisi a, b, sehingga a berada di bawah g saudara k c tapi b ada di atasnya)
Michael
@Michael: Dalam skenario Anda, pertama saya akan mencoba memahami jika benar-benar elemen harus dikelompokkan.
Maicolpt
1
'Gunakan xlink: href' itu keren dan aneh dan sempurna untuk apa yang saya butuhkan !!
Ian
32

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

masukkan deskripsi gambar di sini

  • Anda dapat menumpuk dengan ID

masukkan deskripsi gambar di sini

  • Dengan SVG paling kiri di atas

masukkan deskripsi gambar di sini

  • Jari-jari terkecil di atas

masukkan deskripsi gambar di sini

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

Steve Ladavich
sumber
Pasti jawaban terbaik di sini ... 10/10. Mengapa ini sekarang diterima?
Tigerrrrr
1
@Tigerrrrrr Mengimpor pustaka eksternal untuk melakukan sesuatu yang sederhana seperti mengendalikan susunan tumpukan adalah kegilaan. Lebih buruk lagi, D3 adalah perpustakaan yang sangat besar.
iMe
2
@ iMe, kata baik. Sementara ini adalah sebuah solusi untuk masalah, sehingga layak berada di sini; tidak, dan tidak pernah harus, yang jawabannya. Satu-satunya hal yang seharusnya menggantikan jawaban saat ini adalah jika spec yang lebih baru keluar dan browser berubah. Siapa pun yang ingin menggunakan jawaban ini, jangan impor semua D3, cukup impor modul yang Anda butuhkan. JANGAN IMPOR SEMUA D3 hanya untuk ini.
Steve Ladavich
31

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

Lucas Willems
sumber
1
Terima kasih tetapi saya perlu elemen berdasarkan nilai indeks-z.
Karthi Keyan
Baik. Dan Anda ingin #satu ada di #two atau sebaliknya?
Lucas Willems
ya jika saya mengatakan nilai z-index sebagai -1 untuk #satu berarti itu akan ditampilkan di tingkat atas.
Karthi Keyan
10
Tidak ada properti z-index di salah satu spesifikasi SVG. Satu-satunya cara untuk menentukan elemen mana yang muncul di atas dan yang muncul di bagian bawah adalah dengan menggunakan pemesanan DOM
nicholaswmin
9
d3.selection.prototype.moveToFront = function() { return this.each(function() { this.parentNode.appendChild(this); }); };Dan kemudian Anda dapat mengatakan selection.moveToFront()melalui stackoverflow.com/questions/14167863/...
mb21
21

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

Jose Rui Santos
sumber
4
Apakah ini menarik satu orang dua kali?
mareoraft
@mareoraft Ya, #oneditarik dua kali. Tetapi jika Anda mau, Anda bisa menyembunyikan instance pertama melalui CSS. usememiliki efek yang sama dengan mengkloning elemen DOM yang dimaksud
Jose Rui Santos
+1 karena tidak memerlukan javascript tapi -1 karena Anda juga dapat mengubah urutannya <g>sendiri saat mengubah DOM sebelum memuat.
Hafenkranich
14

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:

papan bumsover
sumber
hai, ini bekerja untuk saya tapi apa yang setara dengan 'membawa ke bawah'? Terima kasih
gavin
Elemen @gavin SVG diambil secara berurutan dari atas ke bawah. Untuk meletakkan sebuah elemen di atas, kami menambahkan () sehingga itu adalah elemen terakhir. Sebaliknya, jika kita ingin elemen dikirim ke bawah kita menempatkannya sebagai elemen pertama dengan prepend (). fungsi bringToBottomofSVG (targetElement) {let parent = targetElement.ownerSVGElement; parent.prepend (targetElement); }
bumsoverboard
13

Menggunakan D3:

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

selection.raise()
Diso
sumber
5
selection.raise()baru dalam D3 pada v4.
tephyr
9

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();

Hafenkranich
sumber
ini 2019 sekarang, apakah ini masih benar? Sebagai SVG 2.0 memperoleh adopsi di browser modern?
Andrew S
8

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

Nathan Hensher
sumber
4

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.

Douglas Daseeco
sumber
4

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>

Bharata
sumber
2

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

Vaseem AbdulSamad
sumber
0

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>

tdjprog
sumber