Come usare z-index in elementi svg?

Sto usando i cerchi svg nel mio progetto in questo modo,

          

E sto usando lo z-index nel tag g per mostrare gli elementi il ​​primo. Nel mio progetto ho bisogno di usare solo il valore z-index, ma non posso usare lo z-index per i miei elementi svg. Ho cercato su Google molto ma non ho trovato nulla relativamente. Quindi, per favore aiutami a usare z-index nel mio svg.

Ecco la DEMO.

specificazione

Nella specifica 1.1 di SVG, l’ordine di rendering si basa sull’ordine del documento:

 first element -> "painted" first 

Riferimento alla specifica: Ordine di rendering SVG 1.1

3.3 Ordine di rendering

Gli elementi di un frammento di documento SVG hanno un ordine di disegno implicito, con i primi elementi nel frammento del documento SVG che vengono “dipinti” per primi. Gli elementi successivi sono dipinti sopra gli elementi precedentemente dipinti.


Soluzione (più pulita, più veloce)

Si dovrebbe mettere il cerchio verde come l’ultimo object da disegnare.

       

Prova a invertire #one e #one . Dai un’occhiata a questo violino: http://jsfiddle.net/hu2pk/3/

Update

In SVG, z-index è definito dall’ordine in cui l’elemento appare nel documento . Puoi dare un’occhiata anche a questa pagina se lo desideri: https://stackoverflow.com/a/482147/1932751

Puoi usare l’ uso .

            

Il cerchio verde appare in alto.
jsFiddle

Come altri hanno già detto, z-index è definito dall’ordine in cui l’elemento appare nel DOM. Se riordinare manualmente il tuo html non è un’opzione o sarebbe difficile, puoi usare D3 per riordinare gruppi / oggetti SVG.

Usa D3 per aggiornare l’ordine DOM e mimare la funzionalità Z-Index

Aggiornamento di SVG Element Z-Index con D3

Al livello più elementare (e se non si utilizzano ID per nient’altro), è ansible utilizzare gli ID degli elementi come standard per z-index e riordinarli con quelli. Oltre a ciò, puoi praticamente scatenare la tua immaginazione.

Esempi nello snippet di codice

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

Non esiste z-index per svgs. Ma svg determina quale dei tuoi elementi è il più alto dalla loro posizione nel DOM. Quindi puoi rimuovere l’Oggetto e posizionarlo alla fine dello svg rendendolo l’elemento “ultimo rendering”. Quello è quindi reso visivamente “il più alto”.


Usando jQuery:

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

utilizzo:

 moveUp($('#myTopElement')); 

Utilizzando D3.js:

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

utilizzo:

 myTopElement.moveUp(); 

Utilizzando D3:

Se si desidera aggiungere l’elemento nell’ordine inverso all’uso dei dati:

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

Invece di .append

Aggiunta di un elemento all’inizio di un elemento di un gruppo

Come discusso, svgs esegue il rendering in ordine e non tiene conto di z-index (per ora). Forse basta inviare l’elemento specifico in fondo al suo genitore in modo che possa durare il rendering.

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

Ha funzionato per me

Utilizzando D3:

Se vuoi reinserire ogni elemento selezionato, in ordine, come ultimo figlio del suo genitore.

 selection.raise() 

Un’altra soluzione potrebbe essere l’uso di div, che usano zIndex per contenere gli elementi SVG. Come qui: https://stackoverflow.com/a/28904640/4552494

Premi l’elemento SVG per durare, in modo che il suo z-index sia in cima. In SVG, non esiste una proprietà chiamata z-index. prova sotto javascript per portare l’elemento in cima.

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

Target: è un elemento per il quale abbiamo bisogno di portarlo in cima svg: è il contenitore di elementi

Le soluzioni pulite, veloci e semplici pubblicate alla data di questa risposta sono insoddisfacenti. Sono costruiti sulla falsa affermazione che i documenti SVG mancano di ordine z. Anche le biblioteche non sono necessarie. Una riga di codice può eseguire la maggior parte delle operazioni per manipolare l’ordine z di oggetti o gruppi di oggetti che potrebbero essere necessari nello sviluppo di un’app che sposta oggetti 2D in uno spazio xyz.

L’ordine Z esiste sicuramente nei frammenti di documento SVG

Quello che viene chiamato un frammento di documento SVG è un albero di elementi derivati ​​dal tipo di nodo di base SVGElement. Il nodo radice di un frammento di documento SVG è un SVGSVGElement, che corrisponde a un tag HTML5. SVGGElement corrisponde al tag e consente di aggregare i bambini.

Avere un attributo z-index su SVGElement come in CSS potrebbe sconfiggere il modello di rendering SVG. Le sezioni 3.3 e 3.4 di W3C SVG Recommendation v1.1 2nd Edition dichiarano che i frammenti di documento SVG (alberi della prole di un SVGSVGElement) vengono renderizzati usando quella che viene chiamata prima la profondità dell’albero . Questo schema è un ordine in tutti i sensi.

L’ordine Z è in realtà una scorciatoia per la visione artificiale del computer per evitare la necessità di un vero rendering 3D con le complessità e le esigenze di calcolo del ray tracing. L’equazione lineare per l’indice z implicito degli elementi in un frammento di documento SVG.

 z-index = z-index_of_svg_tag + depth_first_tree_index / tree_node_qty 

Questo è importante perché se vuoi spostare un cerchio che si trova sotto un quadrato sopra di esso, devi semplicemente inserire il quadrato prima del cerchio. Questo può essere fatto facilmente in JavaScript.

Metodi di supporto

Le istanze SVGElement hanno due metodi che supportano la manipolazione di ordini z semplice e facile.

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

La risposta corretta che non crea un disordine

Poiché SVGGElement (tag ) può essere rimosso e inserito con la stessa facilità di un object SVGCircleElement o di qualsiasi altra forma, i livelli di immagine tipici dei prodotti Adobe e di altri strumenti grafici possono essere implementati con facilità utilizzando SVGGElement. Questo JavaScript è essenzialmente un comando Sposta sotto .

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

Se lo strato di un robot disegnato come figli di SVGGElement gRobot era prima della porta disegnato come figli di SVGGElement gDoorway, il robot è ora dietro la porta perché l’ordine z della porta è ora uno più l’ordine z del robot.

Un comando Move Above è quasi altrettanto semplice.

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

Basti pensare a = a e b = b per ricordare questo.

 insert after = move above insert before = move below 

Lasciando il DOM in uno stato coerente con la vista

La ragione per cui questa risposta è corretta è perché è minima e completa e, come gli interni dei prodotti Adobe o altri editor grafici ben progettati, lascia la rappresentazione interna in uno stato coerente con la vista creata dal rendering.

Approccio alternativo ma limitato

Un altro approccio comunemente utilizzato è l’uso di CSS z-index in combinazione con più frammenti di documento SVG (tag SVG) con sfondi per lo più trasparenti in tutto tranne uno inferiore. Di nuovo, questo sconfigge l’eleganza del modello di rendering SVG, rendendo difficile spostare gli oggetti su o giù nell’ordine z.


GLI APPUNTI:

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

    3.3 Gli elementi ordine di rendering in un frammento di documento SVG hanno un ordine di disegno implicito, con i primi elementi nel frammento del documento SVG che vengono “dipinti” per primi. Gli elementi successivi sono dipinti sopra gli elementi precedentemente dipinti.

    3.4 Come vengono visualizzati i gruppi Gli elementi di raggruppamento come l’elemento ‘g’ (vedi elementi del contenitore) hanno l’effetto di produrre una canvas temporanea separata inizializzata in nero trasparente su cui sono dipinti gli elementi figlio. Al completamento del gruppo, tutti gli effetti filtro specificati per il gruppo vengono applicati per creare un canvas temporaneo modificato. La canvas temporanea modificata viene composta sullo sfondo, prendendo in considerazione tutte le impostazioni di mascheramento e opacità a livello di gruppo sul gruppo.