Con JavaScript, posso cambiare l'indice Z / layer di un elemento <g> SVG?

Diciamo che ho un paio di forme composite ( <g>). Voglio poterli fare clic e trascinare, ma voglio che quello che sto trascinando in questo momento sia sopra l'altro nell'ordine Z, in modo che se lo trascino sull'ALTRO, l'altro uno dovrebbe essere eclissato.

L'indice Z in SVG è definito dall'ordine in cui gli elementi appaiono nel documento. Dovrai cambiare l'ordine degli elementi se vuoi portare una forma specifica in alto.

Un'alternativa allo spostamento di elementi nell'albero consiste nell'usare <use>elementi in cui si modifica il filexlink:href attributo in modo da ottenere l'ordinamento z desiderato.

Ecco un vecchio thread sulla mailinglist degli sviluppatori SVG che discute di questo argomento nel contesto del desiderio di animare alcune forme.

Aggiornare:

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

In questo esempio l'elemento <use> è l'ultimo, il che lo rende l'elemento in primo piano. Possiamo scegliere uno qualsiasi degli altri elementi per agire come in primo piano semplicemente cambiando l' xlink:hrefattributo. Nell'esempio sopra abbiamo scelto il cerchio con id="c1", che lo fa apparire come l'elemento più in alto.

Vedi violino .

Questa è una vecchia domanda, ma ...

Su FireFox (7+) e Chrome (14+) puoi spostare svg_element in alto. Questo non ti dà la libertà di controllo completo dell'asse z, ma è meglio di niente;)

Basta aggiungere di nuovo quell'elemento.

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

Ho pensato che avrebbe generato un errore o qualcosa del genere.

appendChild == si sostituisce == ridisegna

Un'altra soluzione non menzionata consiste nell'inserire ogni elemento / set di elementi svg in un div. Puoi modificare facilmente lo z-index dei div.

Fiddle: cicli di elementi SVG con z-index per contenitori

... Premere i pulsanti per "spingere" l'elemento in avanti. (vs ridipingere l'intero set e spingere 1 elemento in primo piano, ma mantenendo l'ordine originale come nella soluzione accettata)

Sarebbe molto bello avere indici z relativi ...

stackOverflow vuole che metta il codice se è un collegamento da jsfiddle? ... 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>

Sì, l'ordine è ciò che specifica quale oggetto sarà di fronte all'altro. Per manipolare l'ordine dovrai spostare le cose sul DOM. C'è un buon esempio di questo sul wiki SVG su https://www.w3.org/TR/SVG11/render.html#RenderingOrder

Se utilizzi la libreria svg.js , puoi utilizzare il comando ".front ()" per spostare qualsiasi elemento all'inizio.

SVGutilizza un "modello di pittura" di rendering. La vernice viene applicata in operazioni successive al dispositivo di uscita in modo tale che ciascuna operazione dipinga su una certa area del dispositivo di uscita. Quando l'area si sovrappone a un'area dipinta in precedenza, la nuova vernice oscura parzialmente o completamente la vecchia.- collegamento a questo

In SVG, per ottenere un indice Z più alto, dovresti spostare l'elemento in basso nell'albero DOM. Puoi farlo con jQuery, selezionando l'elemento SVG, rimuovendolo e aggiungendolo di nuovo nella posizione che desideri:

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

Il commento di Adam Bradley alla risposta di Sam era esattamente perfetto. Utilizza jQuery anziché solo CSS, ma ha detto questo:

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

Tuttavia, per quello che stavo creando, avevo bisogno che il mio percorso SVG fosse sopra qualsiasi altro percorso al passaggio del mouse, ma fosse ancora sotto il mio testo SVG. Quindi ecco cosa ho pensato:

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

Sia appendTo che insertBefore sposteranno il tuo elemento in una nuova posizione permettendoti di cambiare la profondità dell'elemento SVG a piacimento.