JavaScript ile, bir SVG <g> öğesinin Z dizinini / katmanını değiştirebilir miyim?

Diyelim ki bir çift kompozit şeklim var ( <g>). Tıklayıp sürükleyebilmek istiyorum, ancak şu anda sürüklediğim birinin Z sıralamasında diğerinin ÜSTünde olmasını istiyorum, böylece DİĞER'in üzerine sürüklersem, diğer biri tutulmalıdır.

SVG'deki Z dizini, öğelerin belgede görünme sırasına göre tanımlanır. En üste belirli bir şekil getirmek istiyorsanız, eleman sırasını değiştirmeniz gerekecektir.

Ağaçtaki öğeleri hareket ettirmeye bir alternatif, <use>değiştirdiğiniz öğeleri kullanmaktır .xlink:href size istediğiniz z sıralamasını verecek şekilde niteliği .

İşte svg geliştiricileri posta listesindeki eski bir konu , bu konuyu bazı şekilleri canlandırmak isteme bağlamında tartışıyor.

Güncelleme:

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     style="width:100%; height: 100%">
    <circle id="c1" cx="50" cy="50" r="40" fill="lime" />
    <rect id="r1" x="4" y="20" width="200" height="50" fill="cyan" />
    <circle id="c2" cx="70" cy="70" r="50" fill="fuchsia" />
    <use id="use" xlink:href="#c1" />
</svg>

Bu örnekte <use> öğesi son öğedir ve bu onu en öndeki öğe yapar. Sadece xlink:hrefözniteliği değiştirerek diğer unsurlardan herhangi birini en önde hareket edecek şekilde seçebiliriz . Yukarıdaki örnekte id="c1", en üstteki öğe olarak görünmesini sağlayan daireyi seçtik .

Keman görün .

Bu eski bir soru, ama ...

FireFox (7+) ve Chrome'da (14+) svg_element'i en üste çekebilirsiniz. Bu size tam z ekseni kontrolü özgürlüğü vermez, ancak hiç yoktan iyidir;)

Sadece o öğeyi tekrar ekleyin.

var svg = doc.createElemNS('svg');
var circle = doc.createElemNS('circle');
var line = doc.createElemNS('line');

svg.appendChild(circle); // appends it
svg.appendChild(line);   // appends it over circle
svg.appendChild(circle); // redraws it over line now

Hata yapacağını düşündüm.

appendChild == kendini değiştir == yeniden çiz

Bahsedilmeyen başka bir çözüm, her svg öğesini / öğe kümesini bir div öğesine yerleştirmektir. Div'lerin z-endeksini kolaylıkla değiştirebilirsiniz.

Fiddle: Kaplar için z-endeksli SVG öğeleri döngüleri

... Bu öğeyi öne 'itmek' için düğmelere basın. (tüm seti yeniden boyamak ve 1 öğeyi öne itmek, ancak kabul edilen çözümde olduğu gibi orijinal sırayı korumakla karşılaştırıldığında)

Göreli z endekslerine sahip olmak çok güzel olurdu ...

stackOverflow, jsfiddle'dan bir bağlantıysa kodu koymamı istiyor? ... ook

var orderArray=[0,1,2];
var divArray = document.querySelectorAll('.shape');
var buttonArray = document.querySelectorAll('.button');

for(var i=0;i<buttonArray.length;i++){
    buttonArray[i].onclick=function(){
        var localI = i;
        return function(){clickHandler(orderArray.indexOf(localI));};
    }();
}


function clickHandler(divIndex) {
     orderArray.push(orderArray.splice(divIndex, 1)[0]);
    orderDivs();
}

function orderDivs(){
    for(var i=0;i<orderArray.length;i++){
       divArray[orderArray[i]].style.zIndex=i;        
    }
}

svg {
    width: 100%;
    height: 100%;
    stroke: black;
    stroke-width:2px;
    pointer-events: all;
}
div{
    position:absolute;
}
div.button{
    top:55%;
    height:5%;
    width:15%;
    border-style: outset;
    cursor:pointer;
    text-align: center;
    background:rgb(175, 175, 234);
    
}
div.button:hover{
    border-style: inset;
    background:yellow;
    
}
div.button.first{
    left:0%;
}
div.button.second{
    left:20%;
}
div.button.third{
    left:40%;
}

<div class="shape">
    <svg>
    <circle cx="50" cy="50" r="40" fill="lime" />
    </svg>
</div>
<div class="shape">
    <svg>
        <rect x="4" y="20" width="200" height="50" fill="cyan" />
    </svg>
</div>
<div class="shape">
    <svg>
        <circle cx="70" cy="70" r="50" fill="fuchsia" />
    </svg>
</div>

<div class='button first'>lime</div>
<div class='button second'>cyan</div>
<div class='button third'>fuchsia</div>

Evet, sıra, hangi nesnenin diğerinin önünde olacağını belirleyen şeydir. Sırayı değiştirmek için DOM ile ilgili şeyleri taşımanız gerekir. Bunun güzel bir örneği https://www.w3.org/TR/SVG11/render.html#RenderingOrder adresindeki SVG wiki'sinde var.

Eğer kullanırsanız svg.js kütüphane , sen üstüne herhangi elemanı taşımak için ".front ()" komutunu kullanabilirsiniz.

SVGrender için bir "ressam modeli" kullanır. Boya, ardışık işlemlerde çıktı cihazına uygulanır, öyle ki her işlem çıktı cihazının bir alanını boyar. Alan önceden boyanmış bir alanla örtüştüğünde, yeni boya eskiyi kısmen veya tamamen gizler. - buna bağlantı

SVG'de, daha büyük bir Z indeksi elde etmek için, öğeyi DOM ağacında aşağı taşımanız gerekir. Bunu jQuery ile, SVG öğesini seçerek, kaldırarak ve istediğiniz konuma yeniden ekleyerek yapabilirsiniz:

$('g.element').remove().appendTo('svg');

Adam Bradley'in Sam'in cevabına yaptığı yorum tam olarak yerinde idi. Yalnızca CSS yerine jQuery kullanıyor, ancak şunu söyledi:

$('#thing-i-want-on-top').appendTo('#my-svg');

Ancak, oluşturduğum şey için, SVG Yolumun fareyle üzerine gelindiğinde diğer yolların üzerinde olmasına, ancak yine de SVG Metnimin altında olmasına ihtiyacım vardı. İşte bulduğum şey:

$('#thing-i-want-on-top').insertBefore('#id-for-svg-text');

Hem appendTo hem de insertBefore, öğenizi yeni bir konuma taşıyarak SVG öğesinin derinliğini istediğiniz zaman değiştirmenize olanak tanır.