Svg öğelerinde z-endeksi nasıl kullanılır?

Projemde svg çevrelerini böyle kullanıyorum,

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

Ve göğeleri ilk göstermek için etiketinde z-endeksi kullanıyorum . Projemde sadece z-endeksi değeri kullanmam gerekiyor, ancak svg öğelerime z-endeksini kullanamıyorum. Çok fazla googledim ama nispeten hiçbir şey bulamadım. Lütfen svg dosyamda z-index kullanmama yardım edin.

İşte DEMO.

Şartname

SVG belirtimi sürüm 1.1'de oluşturma sırası, belge sırasını temel alır:

first element -> "painted" first

SVG 1.1 referansı . Şartname

3.3 Sipariş Verme

SVG belge parçasındaki öğeler örtük bir çizim sırasına sahiptir, SVG belge parçasındaki ilk öğeler önce "boyanır" . Müteakip elemanlar önceden boyanmış elemanların üstüne boyanır.

Çözüm (daha hızlı-daha hızlı)

Yeşil daireyi çizilecek en son nesne olarak koymalısınız. İki unsuru değiştirin.

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

İşte senin jsFiddle çatalı .

Çözüm (alternatif)

useÖzellik xlink:hrefve değer olarak öğenin kimliğine sahip etiket . Sonuç iyi görünse bile bunun en iyi çözüm olmayabileceğini unutmayın. Biraz zamana sahip, burada SVG 1.1 spesifikasyonunun bağlantısı "kullanım" Elemanı .

Amaç:

Yazarların kök öğeye bir kimlik eklemek için referans verilen belgede değişiklik yapmalarını önlemek için.

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

SVG 2 ile ilgili notlar

SVG 2 Spesifikasyonu bir sonraki ana sürümdür ve yine de yukarıdaki özellikleri desteklemektedir.

3.4. Sipariş oluşturma

SVG'deki elemanlar üç boyutlu olarak konumlandırılmıştır. SVG görünüm penceresinin x ve y eksenindeki konumlarına ek olarak, SVG öğeleri de z ekseninde konumlandırılır. Z ekseni üzerindeki konum, boyanma sırasını tanımlar .

Z ekseni boyunca, elemanlar yığınlama bağlamında gruplanır.

3.4.1. SVG'de yığın içeriği oluşturma

...

Yığın bağlamları , belge oluşturulduğunda öğelerin üst üste boyanması sırasını tanımlamak için kullanılan kavramsal araçlardır ...

• SVG 2 Desteği Mozilla - Boyama
• Tarayıcımın svg 2.0'ı destekleyip desteklemediğini nasıl anlarım
• SVG kullanabilir miyim

Buradaki diğerlerinin söylediği gibi, z-endeksi, öğenin DOM'da göründüğü sıra ile tanımlanır. Html'nizi manuel olarak yeniden sıralamak bir seçenek değilse veya zorsa, SVG gruplarını / nesnelerini yeniden sıralamak için D3'ü kullanabilirsiniz.

DOM Siparişini Güncellemek ve Z-Index İşlevselliğini Taklit Etmek için D3'ü kullanın

SVG Eleman Z-Endeksinin D3 ile Güncellenmesi

En temel düzeyde (ve başka bir şey için kimlik kullanmıyorsanız), öğe kimliklerini z-endeksi için bir stand-in olarak kullanabilir ve bunlarla yeniden sıralayabilirsiniz. Bunun ötesinde hayal gücünüzün çıldırmasına izin verebilirsiniz.

Kod pasajındaki örnekler

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>

Temel fikir:

1. SVG DOM öğelerini seçmek için D3'ü kullanın.

   var circles = d3.selectAll('circle')

2. SVG öğelerinizle (yeniden sıralamak istediğiniz) 1: 1 ilişkiyle bazı z-endeksleri dizisi oluşturun. Aşağıdaki örneklerde kullanılan Z-endeksi dizileri ID'ler, x & y konumu, yarıçaplar vb.

   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. Ardından, Z-endekslerinizi bu seçime bağlamak için D3'ü kullanın.

   circles.data(zOrders[setOrderBy]);

4. Son olarak, DOM'daki öğeleri verilere göre yeniden sıralamak için D3.sort'u arayın.

   circles.sort(setOrder);

Örnekler

• Kimliğe göre istifleyebilirsiniz

• En soldaki SVG ile üstte

• Üstte en küçük yarıçaplar

• Veya belirli bir sipariş için z-endeksi uygulamak üzere bir dizi belirtin - örnek [3,4,1,2,5]kodumda dizi , 3. daireyi (orijinal HTML düzeninde) DOM'da 1., 4. olarak 2., 1. olarak 3. olacak şekilde taşır / yeniden sıralar , ve bunun gibi...

Ters deneyin #oneve #two. Bu kemana bir göz atın: http://jsfiddle.net/hu2pk/3/

Update

SVG'de, z-endeksi öğenin belgede göründüğü sıra ile tanımlanır . İsterseniz bu sayfaya da göz atabilirsiniz: https://stackoverflow.com/a/482147/1932751

Kullanımı kullanabilirsiniz .

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

Yeşil daire üstte görünür.
jsFiddle

Tartışıldığı gibi, svgs sırayla oluşturulur ve z-endeksini dikkate almaz (şimdilik). Belki de belirli bir öğeyi üst öğesinin alt kısmına göndererek son işlenmesini sağlayın.

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

Benim için çalıştı.

Güncelleme

Grupları içeren iç içe geçmiş bir SVG'niz varsa öğeyi parentNode öğesinden çıkarmanız gerekir.

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

SVG'lerin güzel bir özelliği, iç içe yerleştirildiği gruba bakılmaksızın her bir öğenin konumunu içermesidir: +1:

D3 kullanma:

Seçilen her öğeyi sırayla, üst öğesinin son alt öğesi olarak yeniden eklemek isterseniz.

selection.raise()

Svgs için z-endeksi yoktur. Ancak svg, DOM öğelerinizdeki en üstteki öğelerinizin hangilerinin en üstte olduğunu belirler. Böylece, nesneyi kaldırabilir ve svg'nin sonuna "son işlenen" öğe haline getirebilirsiniz. Bu daha sonra görsel olarak "en üstte" hale getirilir.

JQuery kullanma:

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

kullanımı:

moveUp($('#myTopElement'));

D3.js'yi kullanma:

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

kullanımı:

myTopElement.moveUp();

D3 kullanma:

Veri kullanımına öğeyi ters sırada eklemek istiyorsanız:

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

.Append yerine

Grup öğesinin üstüne öğe ekleme

Başka bir çözüm, SVG öğelerini içermek için zIndex kullanan div'leri kullanmak olacaktır. Burada olduğu gibi: https://stackoverflow.com/a/28904640/4552494

Bu cevabın tarihi itibariyle yayınlanan temiz, hızlı ve kolay çözümler tatmin edici değildir. Bunlar, SVG belgelerinin z sırasına sahip olmadığı kusurlu beyanı üzerine inşa edilmiştir. Kütüphaneler de gerekli değildir. Bir kod satırı, 2B nesneleri bir xyz alanında hareket ettiren bir uygulamanın geliştirilmesinde gerekli olabilecek nesnelerin veya nesne gruplarının z sırasını değiştirmek için çoğu işlemi gerçekleştirebilir.

Z Düzeni SVG Belge Parçalarında Kesinlikle Var

SVG belge parçası olarak adlandırılan, temel düğüm tipi SVGElement'den türetilen bir öğeler ağacıdır. SVG belge parçasının kök düğümü, bir HTML5 <svg> etiketine karşılık gelen bir SVGSVGElement öğesidir . SVGGElement, <g> etiketine karşılık gelir ve toplama çocuklarına izin verir.

CSS'de olduğu gibi SVGElement üzerinde bir z-endeksi özniteliğine sahip olmak SVG oluşturma modelini yener. W3C SVG Tavsiye v1.1 2. Baskı'nın 3.3 ve 3.4 bölümleri, SVG belge parçalarının (bir SVGSVGElement nesnesinden gelen ağaçlar) ağacın derinlik ilk araştırması kullanılarak oluşturulduğunu belirtir . Bu şema, terimin her anlamında az düzendir.

Z sırası, ışın izlemenin karmaşıklıkları ve hesaplama talepleriyle gerçek 3D renderleme ihtiyacını ortadan kaldırmak için bir bilgisayar görme kısayolu. Bir SVG belge parçasındaki öğelerin örtük z-endeksi için doğrusal denklem.

z-index = z-index_of_svg_tag + depth_first_tree_index / tree_node_qty

Bu önemlidir, çünkü karenin altındaki bir daireyi onun üstüne taşımak istiyorsanız, kareyi dairenin önüne yerleştirmeniz yeterlidir. Bu, JavaScript'te kolayca yapılabilir.

Destekleyici Yöntemler

SVGElement örneklerinin basit ve kolay z sırası manipülasyonunu destekleyen iki yöntemi vardır.

• parent.removeChild (çocuk)
• parent.insertBefore (çocuk, childRef)

Dağınıklık Yaramayan Doğru Cevap

SVGGElement ( <g> etiketi) bir SVGCircleElement veya başka bir şekil kadar kolay bir şekilde çıkarılabildiğinden ve eklenebildiğinden, Adobe ürünlerine ve diğer grafik araçlarına özgü görüntü katmanları SVGGElement kullanılarak kolaylıkla uygulanabilir. Bu JavaScript aslında Aşağı Taşı komutudur.

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

SVGGElement gRobot'un çocukları olarak çizilen bir robotun katmanı, SVGGElement gDoorway'in çocukları olarak çizilen kapının önünde olsaydı, robot şimdi kapının arkasındadır, çünkü kapının z sırası bir artı robotun z sırasıdır.

Bir şeyden Taşı komutu kolay neredeyse olduğunu.

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

Bunu hatırlamak için sadece a = a ve b = b'yi düşünün.

insert after = move above
insert before = move below

DOM'u Görünümle Tutarlı Bir Devlette Bırakma

Bu cevabın doğru olmasının nedeni, minimal ve eksiksiz olması ve Adobe ürünlerinin veya diğer iyi tasarlanmış grafik editörlerinin gibi, dahili gösterimi, oluşturmayla oluşturulan görünümle tutarlı bir durumda bırakmasıdır.

Alternatif Ama Sınırlı Yaklaşım

Yaygın olarak kullanılan bir başka yaklaşım, CSS z-endeksini, altta hariç tümü şeffaf arka plana sahip birden fazla SVG belge parçası (SVG etiketi) ile birlikte kullanmaktır. Yine, bu, SVG oluşturma modelinin zarafetini yenerek, nesneleri z düzeninde yukarı veya aşağı taşımayı zorlaştırır.

NOTLAR:

1. ( https://www.w3.org/TR/SVG/render.html v 1.1, 2. Baskı, 16 Ağustos 2011)

   3.3 Bir SVG belge parçasındaki Sipariş Verme Öğeleri, SVG belge parçasındaki ilk öğeler ilk önce "boyanır", örtük bir çizim sırasına sahiptir. Müteakip elemanlar önceden boyanmış elemanların üstüne boyanır.

   3.4 Gruplar nasıl oluşturulur? 'G' elemanı gibi gruplandırma elemanları (kap elemanlarına bakınız), alt elemanların boyanacağı şeffaf siyah olarak başlatılan geçici ayrı bir tuval üretme etkisine sahiptir. Grubun tamamlanmasının ardından, değiştirilmiş geçici bir tuval oluşturmak için grup için belirtilen filtre efektleri uygulanır. Değiştirilmiş geçici tuval, gruptaki tüm grup düzeyinde maskeleme ve opaklık ayarları dikkate alınarak arka planda birleştirilir.

Biz zaten 2019 vez-index hala desteklenmiyor.

Sitede Mozilla'daki devletin SVG2 desteğini görebilirsiniz z-index- Uygulanmadı .

Ayrıca sitede Hata 360148 "SVG öğelerinde" z-endeksi "özelliğini destekleyin" (Rapor edildi: 12 yıl önce).

Ancak SVG'de bunu ayarlamak için 3 olasılığınız var:

1. İle element.appendChild(aChild);
2. İle parentNode.insertBefore(newNode, referenceNode);
3. İle targetElement.insertAdjacentElement(positionStr, newElement);(SVG için IE'de destek yok)

Etkileşimli demo örneği

Tüm bu 3 fonksiyon ile.

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>

SVG öğesini sonuna kadar itin, böylece z-endeksi üstte olur. SVG'de, z-endeksi adı verilen bir özellik yoktur. öğeyi en üste getirmek için javascript'in altında deneyin.

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

Hedef: En üste getirmemiz gereken bir öğedir svg: Öğelerin kabı

bunu yapmak kolay:

1. öğelerinizi klonlayın
2. klonlanmış öğeleri sırala
3. klonlanmış öğelerle değiştir

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>